Just as the DOM allows scripts to modify existing elements, it also allows for the creation of new ones.
.createElement() method creates a new element based on the specified tag name passed into it as an argument. However, it does not append it to the document. It creates an empty element with no inner HTML.
let paragraph = document.createElement('p');
In the example code above, the
.createElement() method takes
'p' as its argument which creates an empty
<p> element and stores it as the
We can assign values to the properties of the newly created element like how we’ve done previously with existing elements.
paragraph.id = 'info'; paragraph.innerHTML = 'The text inside the paragraph';
Above, we use the
.id property to assign
'info' as ID and the
.innerHTML property to set
'The text inside the paragraph' as the content of the
In order to create an element and add it to the web page, you must assign it to be the child of an element that already exists on the DOM, referred to as the parent element. We call this process appending. The
.appendChild() method will add a child element as the parent element’s last child node. The following code appends the
<p> element stored in the
paragraph variable to the document body.
.appendChild() method does not replace the content inside of the parent, in this case,
body. Rather, it appends the new element as the last child of that parent.
<li> element using the
.createElement() method and save it in a variable called
On the following line, assign the
newAttraction element an
Next, assign the
newAttraction element the text
'Rent a Vespa' as its inner HTML.
Lastly, append the
newAttraction element to the list of top attractions with the ID of