JavaScript/Restructure DOM

Besides adding and removing nodes, a common activity on trees is the rearranging of nodes respectively of sub-trees. In some of the previous examples, we have seen that appendChild inserts a node as the last child of a parent node. Of course, this is not delimited to the case that the child is currently created. The same operation is possible for an existing node. Hence it is an appropriate function to perform rearrangements.

Example page

We use the following example HTML page to demonstrate the possibilities.

<!DOCTYPE html>
<html>
<head>
  <script>
    function show() {
      "use strict";
      // ...
    }
  </script>
</head>

<body id="body" style="margin:2em">
  <h1>The magic manipulator</h1>
  <button id="buttonShow" onclick="show()" style="margin:1em 0em 1em 0em">Start</button>

  <div id="div_1">Our sweet products
    <ul id="ul_1">
      <li id="li_11">Ice creme</li>
      <li id="li_12">Chocolate</li>
      <li id="li_13">Coffee</li>
    </ul>
  </div>

  <div id="div_2">Additional offers
    <ul id="ul_2">
      <li id="li_21">Creme</li>
      <li id="li_22">Sugar</li>
      <li id="li_23">Cakes</li>
    </ul>
  </div>

</body>
</html>

Move an element to the end of siblings

We identify two elements and move them to the end of another node. This other node is not necessarily the old parent. But after the movement, it becomes the new parent.

function show() {
  "use strict";

  // select the first <ul> as the new parent
  const ul_1 = document.getElementById("ul_1");

  // select two <li> elements to get moved
  const li_11 = document.getElementById("li_11");
  const li_23 = document.getElementById("li_23"); // The 'cakes'

  // move the two children
  ul_1.appendChild(li_11);
  ul_1.appendChild(li_23);
}

As you see, the 'Ice creme' is moved to the end (temporarily) of its product group. After that, the 'cakes', which were a child of the second product group, were moved to the end of the first product group.

Move an element before a sibling

You can move an element to any position within a group of siblings. ('Siblings' are nodes with a common parent node.) First, you must locate the parent. Next, you locate the child, which shall become the new successor of the element. When both nodes are known, the function insertBefore inserts the element to this position.

As an example, we move the 'Cakes' to the first place of the first product group.

function show() {
  "use strict";

  // select the first <ul> element; it acts as the parent
  const ul_1 = document.getElementById("ul_1");
  // select the first li element; we need it for positioning
  const li_11 = document.getElementById("li_11");
  // select 'Cakes' li element
  const li_23 = document.getElementById("li_23");

  // move the 'Cakes' to the first place of the first product group
  ul_1.insertBefore(li_23, li_11);
}

Here, the 'Cakes' become the first element of the first product group. With the same commands you can move them to any position in the sequence of siblings. Just locate the sibling that shall be his new successor instead of 'li_11'.

Attributes

The sequence of attributes within an element is in no way relevant. Hence, there is no need and no function to rearrange them. When a DOM gets serialized, programs may do it in different ways (original sequence, alphabetically, ...).

Exercises

... are available on another page (click here).