To append an HTML element to another element, you can use the appendChild() method of the target element object.

The appendChild() method appends a node as the last child of an existing node.


Let us say that you have the following list element:

<ul id="drinks">

Now you want to append another element at the end of the list. You can use the following code:

const drinks = document.querySelector('#drinks');

// Create a <li> element
const elem = document.createElement("li");

// Create a new text node
const text = document.createTextNode("Tea");

// Append text node to <li> node

// Finally, append <li> to <ul> node

Take a look at this article to learn more about inserting elements into the DOM in JavaScript.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.