JavaScript add new element

add element

create element

　　Using JS you can add a new child element to an existing element.

　　Step 1: Create empty elements.

　　　　- var elem = document.createElement("tag name");

　　　　- After you create an element, you can add attributes or content to it as you would any element in the DOM tree.

　　　　　　- elem.id = "xxx";

　　　　　　- elem.innerHTML = "xxx";

　　Note: After the element is created, it is only stored in memory and not added to the DOM tree.

　　Step 2: Add the newly created element to the DOM tree under the specified parent element.

　　　　- Append at the end of the parent element: parent.appendChild(elem);

　　　　- before a child element: parent.insertBefore(a,child);

　　　　- Replace a child element: parent.replaceChild(a,child);

　　JS optimization suggestion: operate the DOM tree as little as possible, and when adding parent elements and their child elements at the same time, first create the child elements in memory and put them into the parent element, and then add the parent element to the page at one time.

　　delete a child element

　　　　- parent.removeChild(child);

case code

<! DOCTYPE html > 
< html > 
  < head > 
    < meta charset ="utf-8" > 
    < title ></ title > 
  </ head > 
  < body > 
    < div id ="d1" > 
      < p id ="p1" > I am the first P element </ p > 
      < p id ="p2" > I am the second P element </ p > 
      <p id ="p3" > I am the third P element</p>
    </div>

    < div id ="d2" > 
      < h3 > Heading One </ h3 > 
      < p > I am a paragraph </ p > 
    </ div >

    <select id="sel">
    </select>

    <script>
    var d1=document.getElementById("d1");
    var d2=document.getElementById("d2");
    var p1=document.getElementById("p1");
    var p2=document.getElementById("p2");
    var p3=document.getElementById("p3");
    var sel=document.getElementById( " sel " );
     // 1. Create an empty element 
    var a = document.createElement( " a " );
     // Set key attributes and content 
    a.href = " http://www.baidu.com " ;
    a.innerHTML = " Baidu look " ;
    console.log(a);
    // 2. Add the element to the specified parent element of the DOM tree 
    d1.appendChild(a); // Append at the end 
    // d1.insertBefore(a,p2);//Insert a before p2 
    // d1. replaceChild(a,p1);//Replace the p1 element with a

    // Remove a child element 
    d1.removeChild(p3); // Remove the p3 element under d1

    // Exercise 1: 
    // Add an h1 tag before P1 
    // 1. Create empty element 
    var h1 = document.createElement( " h1 " );
    h1.innerHTML = " I am the newly added title " ;
     // 2. Add the element to the DOM tree 
    d1.insertBefore(h1,p1);

    // Exercise 2: 
    // At the end of d2, add a list ul 
    var ul = document.createElement( " ul " );
    d2.appendChild(ul);
    // Add two li to ul with the contents of "Beijing" and "Shanghai" respectively 
    for ( var i = 0 ;i < 2 ;i ++ ){
       var li = document.createElement( " li " );
      li.innerHTML = i == 0 ? " Beijing " : " Shanghai " ;
      ul.appendChild(li);
    }

    // Exercise 3: 
    var city = [ " Beijing " , " Shanghai " , " Tianjin " , " Chongqing " , " Shenzhen " , " Wuhan " ];
     // Add option to select, the contents are the cities in the city array 
    for ( var i = 0 ;i < city.length;i ++ ){
       var option = document.createElement( " option " );
      option.innerHTML=city[i];
      option.value=city[i];
      sel.appendChild(option);
    }



    </script>