In my previous articles, we looked at how to add markup as well as plain-text to HTML elements using JavaScript. In this article, you'll learn to create and inject a new element to the DOM with JavaScript.
JavaScript provides the createElement() method to create a new DOM element. Let us use this method to create a new <div> element:
const div = document.createElement('div')
The new element is a fully manipulatable DOM node. You can add CSS classes, set ID and other attributes, add texts and markups, and so on:
// set attributes
div.id = 'hint'
div.className = 'course-hint'
// add markup
div.innerHTML = '<p>Learn JavaScript</p>'
Once you are ready, use the appendChild() method to append the HTML element to the DOM:
// grab target element reference
const target = document.querySelector('#intro')
// append div to target
target.appendChild(div)
The above code will insert the new element as a last-child of the target node. To insert the new element inside the <body> tag, use the following example:
// insert element to the body
document.body.appendChild(div)
Alternatively, you can use the insertBefore() method to insert an element to the DOM, just before or after an existing node, as shown below:
// insert the element before target element
target.parentNode.insertBefore(div, target)
// insert the element after target element
target.parentNode.insertBefore(div, target.nextSibling)
✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.
