Insertion methods

This set of methods provides more ways to insert:

  • node.append(...nodes or strings) – append nodes or strings at the end of node,
  • node.prepend(...nodes or strings) – insert nodes or strings at the beginning of node,
  • node.before(...nodes or strings) –- insert nodes or strings before node,
  • node.after(...nodes or strings) –- insert nodes or strings after node,
  • node.replaceWith(...nodes or strings) –- replaces node with the given nodes or strings.

image.png

insertAdjacentHTML/Text/Element

For that we can use another, pretty versatile method: elem.insertAdjacentHTML(where, html).
The first parameter is a code word, specifying where to insert relative to elem. Must be one of the following:

  • "beforebegin" – insert html immediately before elem,
  • "afterbegin" – insert html into elem, at the beginning,
  • "beforeend" – insert html into elem, at the end,
  • "afterend" – insert html immediately after elem.

The second parameter is an HTML string, that is inserted “as HTML”.
image.png

Cloning nodes: cloneNode

How to insert one more similar message?
We could make a function and put the code there. But the alternative way would be to clone the existing div and modify the text inside it (if needed).
Sometimes when we have a big element, that may be faster and simpler.

  • The call elem.cloneNode(true) creates a “deep” clone of the element – with all attributes and subelements. If we call elem.cloneNode(false), then the clone is made without child elements.

A word about “document.write”

There’s one more, very ancient method of adding something to a web-page: document.write.
The syntax:

  1. <p>Somewhere in the page...</p>
  2. <script>
  3.   document.write('<b>Hello from JS</b>');
  4. </script>
  5. <p>The end</p>

The call to document.write(html) writes the html into page “right here and now”. The html string can be dynamically generated, so it’s kind of flexible. We can use JavaScript to create a full-fledged webpage and write it.
The method comes from times when there was no DOM, no standards… Really old times. It still lives, because there are scripts using it.
In modern scripts we can rarely see it, because of the following important limitation:
**The call to document.write only works while the page is loading.If we call it afterwards, the existing document content is erased.
For instance:

  1. <p>After one second the contents of this page will be replaced...</p>
  2. <script>
  3.   // document.write after 1 second
  4.   // that's after the page loaded, so it erases the existing content
  5.   setTimeout(() => document.write('<b>...By this.</b>'), 1000);
  6. </script>

So it’s kind of unusable at “after loaded” stage, unlike other DOM methods we covered above.

Summary

  • Methods to create new nodes:
    • document.createElement(tag) – creates an element with the given tag,
    • document.createTextNode(value) – creates a text node (rarely used),
    • elem.cloneNode(deep) – clones the element, if deep==true then with all descendants.
  • Insertion and removal:
    • node.append(...nodes or strings) – insert into node, at the end,
    • node.prepend(...nodes or strings) – insert into node, at the beginning,
    • node.before(...nodes or strings) –- insert right before node,
    • node.after(...nodes or strings) –- insert right after node,
    • node.replaceWith(...nodes or strings) –- replace node.
    • node.remove() –- remove the node.
  • Text strings are inserted “as text”.
  • There are also “old school” methods:
    • parent.appendChild(node)
    • parent.insertBefore(node, nextSibling)
    • parent.removeChild(node)
    • parent.replaceChild(newElem, node)
  • All these methods return node.
  • Given some HTML inhtml,elem.insertAdjacentHTML(where, html)inserts it depending on the value ofwhere:
    • "beforebegin" – insert html right before elem,
    • "afterbegin" – insert html into elem, at the beginning,
    • "beforeend" – insert html into elem, at the end,
    • "afterend" – insert html right after elem.
  • Also there are similar methods, elem.insertAdjacentText and elem.insertAdjacentElement, that insert text strings and elements, but they are rarely used.
  • To append HTML to the page before it has finished loading:
    • document.write(html)
  • After the page is loaded such a call erases the document. Mostly seen in old scripts.