In this article we will learn how to append to string and DOM elements in JavaScript. JavaScript is a unique language. It can do what no other language can do and i.e. running in browsers. Globally browsers only support JavaScript. Here we will look at an important functionality of appending to string and DOM elements.
Appending to String
You can use + operator to append to a string. The same operator is used for addition. So, how javascript decides if it has to append or add? It depends on operands. If both the operands are numbers then + will add them but if any of them is a string then it will append other to it.
Check out this code example –
var a = "Tony Stark is "; var b = "Ironman"; console.log(a + b)
The output will be –
Tony Stark is Ironman
You can see that we have declared two variables with string values as “Tony Stark is” and “Ironman“. After passing them through + operator, they become Tony Stark is Ironman.
Appending to DOM Elements
In the beginning of this article, I said that JavaScript is fascinating and special. There is no other language which can manipulate DOM elements except JavaScript. Several languages can develop mobile apps and so do JavaScript. But none of them can interact with website DOM except JS.
To append an element, node and string to DOM, we can use Element.append() method or Node.appendChild().
These methods can add an element after the last child of another element. Suppose you have a <div> with 3 children <div>s like this –
<div id="parent"> <div></div> <div></div> <div></div> </div>
Now if you pass a paragraph tag <p> in the append function over <div> with parent id, then <p> will be added after the last child <div>. Like this –
<div id="parent"> <div></div> <div></div> <div></div> <p></p> </div>
The JS code for this is –
let div = document.getElementById("parent");
let p = document.createElement("p");
div.append(p)
You can add a simple string to DOM element too. They will be appended as text node. Check out this code –
let div = document.createElement("div")
let p = document.createElement("p")
div.append("Some text")
console.log(div.childNodes) // NodeList [ #text "Some text" ]
Element.append() supports multiple tags. In our previous code we added a text node to <div> but in the same append syntax, we can also add a <p> or any number of supported tags. Check this code –
let div = document.createElement("div")
let p = document.createElement("p")
div.append("Some text", p)
console.log(div.childNodes) // NodeList [ #text "Some text", <p> ]
Errors in append()
Element.append() throws HierarchyRequestError which is a DOMException when the tag you want to append is not supported as child. For example, if you try to append <body> in <body> then you will get this exception. Check this code example –
let div = document.getElementById("root")
let p = document.getElementById("root")
div.append(p)
console.log(div.childNodes)
The output will be a DOMException error –
VM417:3 Uncaught DOMException: Failed to execute 'append' on 'Element': The new child element contains the parent.
at <anonymous>:3:5VM417:3 Uncaught DOMException: Failed to execute 'append' on 'Element': The new child element contains the parent.
at <anonymous>:3:5