Liaoche JS Tutorial Note 13 inserting the DOM

What should we do when we get a DOM node and want to insert a new DOM within this DOM node?

If the DOM node is empty, for example, <div></div> then the innerHTML = ‘<span>child</span>‘ content of the DOM node can be modified directly, equivalent to "inserting" a new Dom Node.

If the DOM node is not empty, you cannot do so because innerHTML all of the original child nodes are replaced directly.

There are two ways to insert a new Node. One is to use to appendChild add a child node to the last child node of the parent Node. For example:

<!--html structure--<p id= "js" >javascript< Span class= "tag" ></p><div id= "list" > <p id= "java" >java</p> <p id= "python" >python< Span class= "tag" ></p> <p id= "scheme" >scheme</p ></div>          

To <p id="js">JavaScript</p> add to <div id="list"> the last item:

var    js = document.getElementById(‘js‘),    list = document.getElementById(‘list‘);list.appendChild(js);

now, The HTML structure has become this:

<!--html structure--<div id= "list" > <p id= "java" >java </p> <p id= "python" >python</p > <p id= "scheme" > Scheme</p> <p id=" js ">javascript</p> </div>            

Because the node we inserted js already exists in the current document tree, the node is first removed from its original location and then inserted into the new Location.

More often we create a new node from zero and then insert it at the specified location:

var    list = document.getElementById(‘list‘),    haskell = document.createElement(‘p‘);haskell.id = ‘haskell‘;haskell.innerText = ‘Haskell‘;list.appendChild(haskell);

In this way, we add a new node dynamically:

<!--html structure--<div id= "list" > <p id= "java" >java </p> <p id= "python" >python</p > <p id= "scheme" > Scheme</p> <p id=</p> </div>            

Creating a node dynamically and then adding it to the DOM tree allows for a lot of Functionality. For example, The following code dynamically creates a node and <style> then adds it to the end of the node, dynamically adding a new CSS definition to the Document:

var d = document.createElement(‘style‘);d.setAttribute(‘type‘, ‘text/css‘);d.innerHTML = ‘p { color: red }‘;document.getElementsByTagName(‘head‘)[0].appendChild(d);

You can execute the above code in Chrome's console to see how the page style Changes.

InsertBefore

What if we want to insert the node into the specified position? Can be used parentElement.insertBefore(newElement, referenceElement); , the child nodes are inserted referenceElement Before.

Or take the above HTML as an example, suppose we want to Haskell insert Python before:

<!-- HTML结构 --><div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p></div>

It can be written like this:

var    list = document.getElementById(‘list‘),    ref = document.getElementById(‘python‘),    haskell = document.createElement(‘p‘);haskell.id = ‘haskell‘;haskell.innerText = ‘Haskell‘;list.insertBefore(haskell, ref);

The new HTML structure is as Follows:

<!--html structure--<div id= "list" > <p id= "java" >java </p> <p id= "haskell" >haskell</ p> <p id= "python" > Python</p> <p id=" scheme ">scheme</p> </div>            

It can be seen that the insertBefore focus is to get a reference to a "reference child node". Many times, you need to loop through all the child nodes of a parent node, which can be implemented by iterating through the children properties:

var    i, c,    list = document.getElementById(‘list‘);for (i = 0; i < list.children.length; i++) { c = list.children[i]; // 拿到第i个子节点}

Practice

For an existing HTML structure:

1. Scheme
2. Javascript
3. Python
4. Ruby
5. Haskell

<!--html structure--<OlId="test-list" ><Liclass= "lang" >scheme</li> << Span class= "title" >li class= "lang" >javascript </li> <li class= "lang" >python</li> <li class= "lang" >ruby</li> <li class=  "lang" >haskell</li></< Span class= "title" >ol>              

Reorder DOM nodes by string order:

var tmp = [], ol = document.getElementById(‘test-list‘);for (var i of ol.children) {tmp.push(i);}tmp.sort((x, y) => {return x.innerText > y.innerText;});for (var j of tmp) {ol.appendChild(j)};

Liaoche JS Tutorial Note 13 inserting the DOM