DOM'sDocument interface offers - among other things - functions that create new elements, including their attributes and content, and joins them together or into an existing DOM.
createElement() creates an element.createAttribute() creates an attribute that can be assigned to this new or an already existing element.setAttribute() creates an attribute and links it to an existing element.appendChild() integrate an element into another.
// an <p> elementconstp=document.createElement("p");// its contentp.innerHTML="The new paragraph.";
Now, the element and its content are created. But until here, they are not part of a DOM. They exist only in the memory of the JavaScript engine.
To integrate them into the page, we retrieve the body or any other element of an existing page and append the new element as its last element.
constbody=document.getElementById("body");body.appendChild(p);
All in all, the HTML plus JavaScript looks like this:
<!DOCTYPE html><html><head><script>functionshow(){"use strict";// an create an <p> elementconstp=document.createElement("p");// create its contentp.innerHTML="The new paragraph.";// integrate it into the bodyconstbody=document.getElementById("body");body.appendChild(p);}</script></head><bodyid="body"style="margin:2em"><buttonid="buttonShow"onclick="show()">Start</button></body></html>
The original page does not contain a paragraph. But after you click on the button, the paragraph is integrated into the page and is visible. Btw: You can click more than once on the button. What will happen?
Attributes are created with either thecreateAttribute() or thesetAttribute() function. The first of the two acts like the above showncreateElement() function. It creates the new attribute only in memory without a connection to other elements. BecausesetAttribute() integrates the new attribute directly into an element, we use this variant.
The example uses thea element with itshref attribute.
// an <a> elementconstanchor=document.createElement("a");// its contentanchor.innerHTML="The IANA example daomain.";// its 'href' attributeanchor.setAttribute("href","https://www.example.com");
Now, the element, a single attribute, and the element's content are created. Again, we integrate them into the page as we have done above.
All in all, the HTML plus JavaScript looks like this:
<!DOCTYPE html><html><head><script>functionshow(){"use strict";// an create an <a> elementconstanchor=document.createElement("a");// create its contentanchor.innerHTML="The IANA example domain.";// create its 'href' attributeanchor.setAttribute("href","https://www.example.com");// see below: anchor.href = "https://www.example.com";// integrate the element inclusive its attribute into the bodyconstbody=document.getElementById("body");body.appendChild(anchor);/* now, the body looks like this: <button id="buttonShow" onclick="show()">Start</button> <a href="https://www.example.com">The IANA example domain.</a> */}</script></head><bodyid="body"style="margin:2em"><buttonid="buttonShow"onclick="show()">Start</button></body></html>
The original page does not contain a link. But after you click on the button, the link to the IANA example page is integrated into the page and is usable.
One of theprevious pages has explained how to change attributes with a different syntax.
element_name.attribute_name="new value";
Just use the element plus its attribute name and assign the attribute value to it. If you change the previous example to this syntax, you will reach the same behavior of adding the link.
anchor.href="https://www.example.com";// instead of the above:// anchor.setAttribute("href", "https://www.example.com");
The shown functions create elements and attributes. Such new objects can be joined together to create huger parts - of course in a nested way. And they can be joined to an already existing HTML page, respectively, the DOM tree.
constdiv=document.getElementById("div_1");constanchor=document.createElement("a");div.appendChild(anchor);
The content of an element can be changed by assigning a new value to its propertyinnerHTML. If this new value contains the string representation of an HTML fragment, the assignment creates child nodes within the element. That's possible but not the intended way of usinginnerHTML.
constelem=document.getElementById("p1");elem.innerHTML="New text in the paragraph.<p>next P</p><p>and even one more P</p>";
.. leads to ..
<pid="p1">New text in the paragraph<p>next P</p><p>and even one more P</p></p>
The JavaScript fragment inserts two more paragraphs, but not behind the first one. They exist within the first one.
The antiquated functiondocument.write() was able to insert new elements into an HTML page. Its usage isstrongly discouraged nowadays.
