Create createElement
document.createElement('tag')
createTextNode
document.createTextNode('text')
Add Append Append at the end of node
el.append(nodes, 'strings')
Prepend Insert at the beginning of node
el.prepend(nodes, 'strings')
Before Insert before node
el.before(nodes, 'strings')
After Insert after node
el.after(nodes, 'strings')
Comment Arguments are DOM nodes to insert, or text strings Text strings become text nodes automatically May add multiple args
let div = document.createElement("div")
let p = document.createElement("p")
div.append(p)
let div = document.createElement("div")
div.append("Some text")
let div = document.createElement("div")
let p = document.createElement("p")
div.append("Some text", p)
replaceWith Replaces node
node.replaceWith(nodes, 'strings')
insertAdjacentHTML Method inserts HTML. insertion methods remove the node from the old place.
el.insertAdjacentHTML(where, "HTML string")
beforebegin Insert html immediately before elem
el.insertAdjacentHTML("beforebegin", "HTML string")
afterbegin Insert html into elem, at the beginning
el.insertAdjacentHTML("afterbegin", "HTML string")
beforeend insert html into elem, at the end
el.insertAdjacentHTML("beforeend", "HTML string")
afterend Insert html immediately after elem
el.insertAdjacentHTML("afterend", "HTML string")
Example
document.body.insertAdjacentHTML("afterbegin", `<div class="alert">
<strong>Hi there!</strong> You've read an important message.
</div>`)
insertAdjacentText String of text is inserted “as text”. Rarely used methods, usually append/prepend/before/after are used
el.insertAdjacentText("beforebegin", "text")
el.insertAdjacentText("afterbegin", "text")
el.insertAdjacentText("beforeend", "text")
el.insertAdjacentText("afterend", "text")
insertAdjacentElement Element is inserted. Rarely used methods, usually append/prepend/before/after are used
el.insertAdjacentElement("beforebegin", element)
el.insertAdjacentElement("afterbegin", element)
el.insertAdjacentElement("beforeend", element)
el.insertAdjacentElement("afterend", element)
Remove
node.remove()
Example
let div = document.createElement('div')
document.body.append(div)
setTimeout(() => div.remove(), 1000)
cloneNode
el.cloneNode()
Creates a “deep” clone of the element – with all attributes and sub elements
el.cloneNode(true)
Clone is made w/o child elements
el.cloneNode(false)
Example
<div class="alert" id="div">
<strong>Hi there!</strong> You've read an important message.
</div>
let div2 = div.cloneNode(true) // clone the message
div2.querySelector('strong').innerHTML = 'Bye there!' // change the clone
div.after(div2) // show the clone after the existing div
Old-school methods appendChild() , insertBefore() , replaceChild() , removeChild() All these methods return the inserted/removed node usually the returned value is not used, we just run the method
parentElem.appendChild(node) // Appends node as the last child of parentElem
parentElem.insertBefore(node, nextSibling) // Inserts node before nextSibling into parentElem.
parentElem.replaceChild(node, oldChild) // Replaces oldChild with node among children of parentElem.
parentElem.removeChild(node) // Removes node from parentElem (assuming node is its child).
document.write() ancient method of adding something to a web-page string can be dynamically generated only works while the page is loading if we call it afterwards, the existing document content is erased it works fast, because there’s no DOM modification involved if we need to add a lot of text into HTML dynamically, and we’re at page loading phase, and the speed matters, it may help
document.write('<b>Hello from JS</b>')
DocumentFragment do not use, use array instead special DOM node that serves as a wrapper to pass around lists of nodes we can append nodes to it when we insert it somewhere, then its content is inserted
<ul id="ul"></ul>
function getListContent() {
let fragment = new DocumentFragment()
for(let i=1; i<=3; i++) {
let li = document.createElement('li')
li.append(i)
fragment.append(li)
}
return fragment
}
ul.append(getListContent())
Output
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Proper array version
function getListContent() {
let result = []
for(let i=1; i<=3; i++) {
let li = document.createElement('li')
li.append(i)
result.push(li)
}
return result
}
ul.append(...getListContent())