JavaScript 添加新元素

时间:2024-02-24 15:01:32

JavaScript 添加新元素

  版权声明:未经授权,严禁转载!  


 添加元素

 创建元素

  使用 JS 可以为一个已有的元素添加一个新的子元素。

  第一步:创建空元素。

    - var elem = document.createElement("标签名");

    - 创建元素后,可以像使用 DOM 树中的任意元素一样,为此元素添加属性或内容。

      - elem.id = "xxx";

      - elem.innerHTML = "xxx";

  注意:元素创建完成后,只是在内存中保存,并没有添加到 DOM 树。

   第二步:将新创建的元素添加到 DOM 树的指定父元素下。

    - 在父元素末尾追加:parent.appendChild(elem);

    - 添加到某个子元素之前:parent.insertBefore(a,child);

    - 替换某个子元素:parent.replaceChild(a,child);

  JS 优化建议:尽量少的操作 DOM 树,同时添加父元素及其子元素的时候,先在内存中将子元素创建完毕并拼到父元素中,再一次性将父元素添加到页面。

  删除一个子元素

    - parent.removeChild(child);

 

 案例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="d1">
      <p id="p1">我是第一个P元素</p>
      <p id="p2">我是第二个P元素</p>
      <p id="p3">我是第三个P元素</p>
    </div>

    <div id="d2">
      <h3>标题一</h3>
      <p>我是一个段落</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.创建一个空元素
    var a=document.createElement("a");
    //设置关键属性和内容
    a.href="http://www.baidu.com";
    a.innerHTML="百度一下";
    console.log(a);
    //2.将元素添加到DOM树的指定父元素下
    d1.appendChild(a);//在末尾追加
    // d1.insertBefore(a,p2);//将a插入到p2之前
    // d1.replaceChild(a,p1);//用a替换p1元素

    //删除一个子元素
    d1.removeChild(p3);//删除d1下的p3元素

    //练习1:
    //在P1之前添加一个h1标记
    //1.创建空元素
    var h1=document.createElement("h1");
    h1.innerHTML="我是新添加的标题";
    //2.将元素添加到DOM树
    d1.insertBefore(h1,p1);

    //练习2:
    //在d2的末尾,添加一个列表ul
    var ul=document.createElement("ul");
    d2.appendChild(ul);
    //再在ul中添加两个li,内容分别为“北京”和“上海”
    for(var i=0;i<2;i++){
      var li=document.createElement("li");
      li.innerHTML=i==0?"北京":"上海";
      ul.appendChild(li);
    }

    //练习3:
    var city=["北京","上海","天津","重庆","深圳","武汉"];
    //在select中添加option,内容分别为city数组中的城市
    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>