伊人久久综合凹凸资源,中文字幕一区二区人妻电影

快捷導(dǎo)航

JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加、移除元素或?qū)傩缘姆椒ǚ治?/h1>

更新時(shí)間：2019年01月03日 12:01:17 作者：司馬懿字仲達(dá)

這篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加、移除元素的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)頁(yè)面元素動(dòng)態(tài)添加、移除、設(shè)置等相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加、移除元素或?qū)傩缘姆椒?。分享給大家供大家參考，具體如下：

JavaScript 動(dòng)態(tài)添加、移除元素

appendChild(newnode)向節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾添加新的子節(jié)點(diǎn)。

insertBefore(newnode, existingnode)在已有子節(jié)點(diǎn)之前插入新的子節(jié)點(diǎn)。

removeChild(node)刪除元素的某個(gè)指定的子節(jié)點(diǎn)，并以 Node 對(duì)象返回被刪除的節(jié)點(diǎn)，如果節(jié)點(diǎn)不存在則返回 null。

innerHTML屬性設(shè)置或返回表格行的開(kāi)始和結(jié)束標(biāo)簽之間的 HTML。

測(cè)試用例

<html>
  <head>
    <style type="text/css">
      .style1 { background-color:yellow; width:200px;height:100px;float:left;}
      .style2 { background-color:#aa0; width:200px;height:100px;float:left;}
      .style3 { background-color:rgb(0,200,200); width:200px;height:100px;float:left;}
      .item-style {background-color:pink;}
    </style>
    <script type="text/javascript">
      function addElement1() {
        var container = document.getElementById("container1");
        var elem1 = document.createElement("div");
        elem1.setAttribute("class", "item-style");
        var textnode1 = document.createTextNode("appendChild");
        elem1.appendChild(textnode1);
        container.appendChild(elem1);
        var middleChild = document.getElementById("middle-child");
        var elem2 = document.createElement("div");
        elem2.setAttribute("class", "item-style");
        var textnode2 = document.createTextNode("insertBefore");
        elem2.appendChild(textnode2);
        container.insertBefore(elem2, middleChild);
      }
      function addElement2() {
        var container = document.getElementById("container2");
        container.innerHTML = "<div>Hello World \"2\"</div>";
      }
      function removeNode() {
        var container = document.getElementById("container3");
        var myNode = document.getElementById("myNode");
        container.removeChild(myNode);
      }
      function operateElements() {
        addElement1();
        addElement2();
        removeNode();
      }
    </script>
  </head>
  <body onload="operateElements()">
    <div id="container1" class="style1">
      <div id="middle-child">Middle Child</div>
    </div>
    <div id="container2" class="style2"></div>
    <div id="container3" class="style3"><p id="myNode">Hello World</p></div>
    <div style="clear:both;"/>
    <button onclick="operateElements()">Operate Elements</button>
  </body>
</html>

JavaScript 動(dòng)態(tài)添加、移除屬性

setAttribute(attributename, attributevalue)添加指定的屬性，并為其賦指定的值。將屬性設(shè)置為undefined等同于刪除。

removeAttribute(attributename)刪除指定的屬性。

getAttributeNode(attributename)以 Attr 對(duì)象返回指定屬性名的屬性值。

removeAttributeNode(attributenode)刪除 Attr 形式指定的屬性，同時(shí)返回被刪除的Attr 形式的屬性。

測(cè)試用例

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
      function operateAttributes() {
        var node2 = document.getElementById("node2");
        //設(shè)置font-style和font-size無(wú)效，這些屬性脫離style單獨(dú)設(shè)置是無(wú)效的
        node2.setAttribute("style", "color:red;");
        var node3 = document.getElementById("node3");
        node3.setAttribute("font-size", undefined);
        var node4 = document.getElementById("node4");
        //font-style和font-size的remove無(wú)效，因?yàn)樗鼈儧](méi)有單獨(dú)存在
        node4.removeAttribute("font-size");
        var node5 = document.getElementById("node5");
        //無(wú)法獲取font-style和font-size
        var attributeNode = node5.getAttributeNode("style");
        var attr = node5.removeAttributeNode(attributeNode);
        node5.innerHTML = "attr=" + attr + ", attr.name=" + attr.name + ", attr.value=" + attr.value;
      }
    </script>
  </head>
  <body onload="operateAttributes()">
    <p id="node0" style="font-style:italic;font-size:12px;">0 Hello World</p>
    <p id="node1" font-size="12px" font-style="italic">1 Hello World : font-size、font-style等，這些屬性脫離style單獨(dú)設(shè)置是無(wú)效的</p>
    <p id="node2" style="font-style:italic;font-size:12px;">2 Hello World setAttribute</p>
    <p id="node3" style="font-style:italic;font-size:12px;">3 Hello World setAttribute</p>
    <p id="node4" style="font-style:italic;font-size:12px;">4 Hello World removeAttribute</p>
    <p id="node5" style="font-style:italic;font-size:12px;">5 Hello World getAttributeNode & removeAttributeNode</p>
  </body>
</html>