YouTip"); } ``` --- ## Important Considerations ### 1. Difference between `createElement()` and `createElementNS()` * **`createElement()`** creates an element without a specific namespace. In HTML documents, it automatically assigns the HTML namespace (`http://www.w3.org/1999/xhtml`). * **`createElementNS()`** explicitly assigns the element to a specific namespace. This is required when dynamically creating SVG (`http://www.w3.org/2000/svg`) or MathML (`http://www.w3.org/1998/Math/MathML`) elements in a web browser, otherwise they will not render correctly. ### 2. Creating SVG Elements in HTML5 If you want to create an SVG element dynamically via JavaScript and append it to an HTML page, you must use `createElementNS()`: ```javascript // Correct way to create an SVG element var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svgElement.setAttribute("width", "100"); svgElement.setAttribute("height", "100"); // Incorrect way (will be treated as an unknown HTML element and won't render) // var svgElement = document.createElement("svg"); ```
Met Document Createelementns
## XML DOM: createElementNS() Method
The `createElementNS()` method of the `Document` interface creates an element node with a specified namespace URI and qualified name.
This method is essential when working with XML documents that utilize multiple namespaces (such as SVG, MathML, or custom XML schemas) to prevent element name collisions.
---
## Syntax
```javascript
var element = document.createElementNS(namespaceURI, qualifiedName);
```
### Parameters
| Parameter | Type | Description |
| :--- | :--- | :--- |
| `namespaceURI` | String | A string that specifies the namespace URI to associate with the element. |
| `qualifiedName` | String | A string that specifies the qualified name (the tag name, optionally prefixed) of the element to be created. |
### Return Value
* **Type:** `Element`
* **Description:** A new `Element` object with the specified namespace URI and node name.
---
## Code Example
The following example loads an XML document (`books.xml`) and appends a new element with a custom namespace to each `` element.
### Sample XML (`books.xml`)
```xml
Harry Potter
J.K. Rowling
Learning XML
Erik T. Ray
```
### JavaScript Implementation
```javascript
// Load the XML document
var xmlDoc = loadXMLDoc("books.xml");
// Retrieve all elements
var books = xmlDoc.getElementsByTagName('book');
var newElement, newText;
// Loop through each book and append a namespaced element
for (var i = 0; i < books.length; i++) {
// Create an element 'edition' with the namespace URI "http://www.example.com/publisher" (using prefix 'p')
newElement = xmlDoc.createElementNS("http://www.example.com/publisher", "p:edition");
// Create a text node and append it to the new element
newText = xmlDoc.createTextNode("First");
newElement.appendChild(newText);
// Append the new element to the current book node
books.appendChild(newElement);
}
// Retrieve and display the titles and the newly added namespaced elements
var titles = xmlDoc.getElementsByTagName("title");
var editions = xmlDoc.getElementsByTagNameNS("http://www.example.com/publisher", "edition");
for (var i = 0; i < titles.length; i++) {
document.write(titles.childNodes.nodeValue);
document.write(" - ");
document.write(editions.childNodes.nodeValue);
document.write(" edition.");
document.write(" Namespace: ");
document.write(editions.namespaceURI);
document.write("
"); } ``` --- ## Important Considerations ### 1. Difference between `createElement()` and `createElementNS()` * **`createElement()`** creates an element without a specific namespace. In HTML documents, it automatically assigns the HTML namespace (`http://www.w3.org/1999/xhtml`). * **`createElementNS()`** explicitly assigns the element to a specific namespace. This is required when dynamically creating SVG (`http://www.w3.org/2000/svg`) or MathML (`http://www.w3.org/1998/Math/MathML`) elements in a web browser, otherwise they will not render correctly. ### 2. Creating SVG Elements in HTML5 If you want to create an SVG element dynamically via JavaScript and append it to an HTML page, you must use `createElementNS()`: ```javascript // Correct way to create an SVG element var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svgElement.setAttribute("width", "100"); svgElement.setAttribute("height", "100"); // Incorrect way (will be treated as an unknown HTML element and won't render) // var svgElement = document.createElement("svg"); ```
"); } ``` --- ## Important Considerations ### 1. Difference between `createElement()` and `createElementNS()` * **`createElement()`** creates an element without a specific namespace. In HTML documents, it automatically assigns the HTML namespace (`http://www.w3.org/1999/xhtml`). * **`createElementNS()`** explicitly assigns the element to a specific namespace. This is required when dynamically creating SVG (`http://www.w3.org/2000/svg`) or MathML (`http://www.w3.org/1998/Math/MathML`) elements in a web browser, otherwise they will not render correctly. ### 2. Creating SVG Elements in HTML5 If you want to create an SVG element dynamically via JavaScript and append it to an HTML page, you must use `createElementNS()`: ```javascript // Correct way to create an SVG element var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svgElement.setAttribute("width", "100"); svgElement.setAttribute("height", "100"); // Incorrect way (will be treated as an unknown HTML element and won't render) // var svgElement = document.createElement("svg"); ```