DOM - AppendChild


AppendChild is a node dom tree operation that:

  • adds (a new node)
  • move (a node of the DOM tree)

as children at the end of all already existing children of this node.


returnedValue = node.appendChild(Node|documentFragment)


  • returnedValue is:
    • the appended child if the argument is a node
    • the empty DocumentFragment if the argument is a DocumentFragment


With the HTML DOM

for (var i=0;i<=3;i++){
  let p = document.createElement("p");
  p.innerText = "Lorem Ipsom "+i;
  • Append it to the body
  • Result:

Recommended Pages
DOM - Child Nodes of a Node

Child Nodes of an element in the dom tree Via child selector, you can select element that are child of another element. The childNodes property of an element returns a collection of child Node....
DOM - Node

In DOM, every markup in an (XML|HTML) document is a node represented in a tree view. Every DOM node has at least: a , a name, and a value, which might or might not be empty. Node Type...
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective
HTML - (Client-side) Script (Element)

A client-side script is a program that is: linked (server-side script) or directly embedded in an HTML document (in-line script) Scripts in HTML have “run-to-completion” semantics, meaning that...
How to load a script dynamically with Javascript?

This page shows you how you can load a script dynamically with Javascript to load and use it when needed. In short, if you add: a script via an DOM element, it will be executed (via append or insertAdjacentElement)...
Javascript - Getting Started (Hello World) in the browser

Javascript in the browser getting started page. In a web page, Javascript is modifying the HTML dom (the browser representation of the HTML page). With the Web Dom API, you handle one DOM element at...
Javascript - Module Loader (Script Loader)

A loader searches and loads module and script into the javascript engine (environment). From the main script, they will: create a dependency graph from the require and import statement find them...
Insert Adajcent Illustration
What is InsertAdjacent and InsertAdjacentHTML and how to use them ?

InsertAdjacent is a function that permits to insert a node or a html into the DOM tree relatively to a node at this positions (as a child or sibling)

Share this page:
Follow us:
Task Runner