I am currently learning DOM, and found the following task quite hard to complete in an proper manner. The js code is supposed to: append new divs, as a continuation of the existing ones, remove the existing divs, change colour of one div, switch all div's text content. My issues: Task 1. works but in a ugly way, new divs

js DOM divs manipulation problems

I am currently learning DOM, and found the following task quite hard to complete in an proper manner. The js code is supposed to:

append new divs, as a continuation of the existing ones,
remove the existing divs,
change colour of one div,
switch all div’s text content. My issues: Task 1. works but in a ugly way, new divs are appended in a continous manner, I would rather see them in vertical order, as the exisitng ones Task 4. works only for the first div. Rest stays as is.

      function myFunctionAdd() {
        var node = document.createElement("outerDiv");
        var textnode = document.createTextNode("My Vertical Div#");
        node.appendChild(textnode);
        document.getElementById("add").appendChild(node);
      }
      function myFunctionRem() {
        document.getElementById("innerDiv1").outerHTML = "";
      }
      function myFunctionColour() {
        document.getElementsByTagName("z4")[0].setAttribute("class", "democlass");
      }
            function myFunctionChangeText() {
        var x = "a new txt";
        for (var i = 0; i < 4; i++){
            document.getElementById("innerDiv1").innerHTML = x;
      }
}

  .democlass {
  color: blue;
}

   <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>Tytul dokumentu</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <button onclick="myFunctionAdd()">New div</button>
      <button onclick="myFunctionRem()">Remove divs</button>
      <button onclick="myFunctionColour()">Colour change</button>
      <button onclick="myFunctionChangeText()">Div's new text</button>
    </header>
    <ul>
      <li id="">
                <div class="innerDiv1" myattr="">
                  <p> My Vertical Div1 </p>
                </div>
      </li>
      <li>
                <div class="innerDiv1" myattr="">
                    <p>My Vertical Div2 </p>
                </div>
      </li>
       <li>
                <div class="innerDiv1" myattr="4">
                    <z4>My Vertical Div3 </z4>
                </div>
       </li>
       <li id="add">
                <div class="innerDiv" myattr="">
                    <p>My Vertical Div4</p>
                </div>
       </li>
            
    </ul>
     
  </body>
</html>

Answer

Here is a working version best comparing differences to see what had been changed.

Using div as a child of <ul> is invalid it must be <li>

Tags like <z4> aren’t part of HTML standard and while you can make your own tags up they need to be properly registered and following strict naming convention to prevent conflicts of new HTML tags in future.

id of elements should be unique

  <html>
      <head>
        <title>Tytul dokumentu</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <link rel="stylesheet" href="styles.css">
        <script>
          function myFunctionAdd() {
            var li = document.createElement("li");
            var div = document.createElement("div");
            var p = document.createElement("p");
            
            li.appendChild(div);
            div.appendChild(p);
            
            p.textContent = "My Vertical Div#";
            
            document.getElementById("list").appendChild(li);
          }

          function myFunctionRem() {
            let list = document.getElementById("list");
            let deleteChild = list.firstElementChild;
            
            if (deleteChild) {
                list.removeChild(deleteChild);
             }
          }
          function myFunctionColour() {
           let list = document.getElementById("list");
            let items = list.children.length;
            
            for (var i = 0; i < items; i++){
                let li = list.children[i]
                li.className = "democlass";
            }
          }
          function myFunctionChangeText() {
            var x = "a new txt";
            
            let list = document.getElementById("list");
            let items = list.children.length;
            
            for (var i = 0; i < items; i++){
                let li = list.children[i]
                let div = li.firstElementChild;
                let p = div.firstElementChild;
                p.textContent = x;
            }
    }
        </script>
      </head>
      <style>
      .democlass {
      color: blue;
    }
      </style>
      <body>
        <header>
          <button onclick="myFunctionAdd()">New div</button>
          <button onclick="myFunctionRem()">Remove divs</button>
          <button onclick="myFunctionColour()">Colour change</button>
          <button onclick="myFunctionChangeText()">Div's new text</button>
        </header>
        <ul id="list">
            <li>
              <div id="innerDiv1">
                <p> My Vertical Div1 </p>
              </div>
            </li>
            <li>
              <div id="innerDiv2">
                <p>My Vertical Div2 </p>
              </div>
            </li>
            <li>
              <div id="innerDiv3">
                <p>My Vertical Div3 </p>
              </div>
            </li>
            <li>
              <div id="innerDiv4">
                <p>My Vertical Div4</p>
              </div>
            </li>
        </ul>
      </body>
    </html>

Advertisement

Answer