DOM对象控制HTML无素——详解3

时间：2024-10-22 13:37:50

创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

语法：

document.createElement(tagName)

参数:

tagName：字符串值，这个字符串用来指明创建元素的类型。

<script> var createElement = document.createElement('p') //创建了一个P标签的元素 </script>

插入

创建文本节点createTextNode

createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。

语法：

document.createTextNode(data)

参数：

data : 字符串值，可规定此节点的文本。

  <script>

        var createElement = document.createElement('p')   //创建了一个P标签的元素

        var createTextNode = document.createTextNode("这是一个文本节点")   //创建了一个文本节点

        createElement.appendChild(createTextNode)//把文本节点导入元素节点

        document.body.appendChild(createElement) //把元素节点导入body元素节点中，呈现在页面上

     </script>

节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法:

appendChild(newnode)

参数:

newnode：指定追加的节点。

<body>

    <ul>

        <li>javascript</li>

        <li>jquery</li>

        <li>html5</li>

    </ul>

    <script>

        var ul = document.getElementsByTagName("ul")[0]

        var newNode = document.createElement("li")

        var text = document.createTextNode("css3")

        newNode.appendChild(text)

        ul.appendChild(newNode)   =>css3

    </script>

</body>

插入节点insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

语法:

insertBefore(newnode,node);

参数:

newnode: 要插入的新节点。

node: 指定此节点前插入节点。

 <body>

     <ul>

         <li>javascript</li>

         <li>jquery</li>

         <li>html5</li>

     </ul>

     <script>

         var ul = document.getElementsByTagName("ul")[0]

         var li = document.getElementsByTagName("li")[0]

         var newNode = document.createElement("li")

         var text = document.createTextNode("css3")

         newNode.appendChild(text)

         ul.insertBefore(newNode,li)    //==>css3 在指定的无素节点前插入此创建的新元素

     </script>

 </body>

删除节点removeChild()

removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

语法:

nodeObject.removeChild(node)

参数:

node ：必需，指定需要删除的节点。

 <body>

     <ul>

         <li>javascript</li>

         <li>jquery</li>

         <li>html5</li>

     </ul>

     <script>

         var ul = document.getElementsByTagName("ul")[0]

         var li = document.getElementsByTagName('li')[0]

         ul.removeChild(li)    //删除了UL里第一个子节点

     </script>

 </body>

替换元素节点replaceChild()

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。

语法：

node.replaceChild (newnode,oldnew )

参数：

newnode : 必需，用于替换 oldnew 的对象。 
oldnew : 必需，被 newnode 替换的对象。

<body>

    <ul>

        <li>javascript</li>

        <li>jquery</li>

        <li>html5</li>

    </ul>

    <script>

        var ul = document.getElementsByTagName("ul")[0]

        var newNode = document.createElement("li")

        var newNodeText = document.createTextNode("css3")

        newNode.appendChild(newNodeText)

        var oldNode = document.getElementsByTagName('li')[0]

        ul.replaceChild(newNode,oldNode)  //javascript替换成了CSS3

    </script>

</body>

相关文章