zoukankan      html  css  js  c++  java
  • DOM对象控制HTML无素——详解3

    创建元素节点createElement

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

    语法:

    document.createElement(tagName)

    参数:

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

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

    插入

    创建文本节点createTextNode

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

    语法:

    document.createTextNode(data)

    参数:

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

    1  <script>
    2        var createElement = document.createElement('p')   //创建了一个P标签的元素
    3        var createTextNode = document.createTextNode("这是一个文本节点")   //创建了一个文本节点
    4        createElement.appendChild(createTextNode)//把文本节点导入元素节点
    5        document.body.appendChild(createElement) //把元素节点导入body元素节点中,呈现在页面上
    6     </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: 指定此节点前插入节点。

     1 <body>
     2     <ul>
     3         <li>javascript</li>
     4         <li>jquery</li>
     5         <li>html5</li>
     6     </ul>
     7     <script>
     8         var ul = document.getElementsByTagName("ul")[0]
     9         var li = document.getElementsByTagName("li")[0]
    10         var newNode = document.createElement("li")
    11         var text = document.createTextNode("css3")
    12         newNode.appendChild(text)
    13         ul.insertBefore(newNode,li)    //==>css3 在指定的无素节点前插入此创建的新元素
    14     </script>
    15 </body>

    删除节点removeChild()

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

    语法:

    nodeObject.removeChild(node)

    参数:

    node :必需,指定需要删除的节点。

     1 <body>
     2     <ul>
     3         <li>javascript</li>
     4         <li>jquery</li>
     5         <li>html5</li>
     6     </ul>
     7     <script>
     8         var ul = document.getElementsByTagName("ul")[0]
     9         var li = document.getElementsByTagName('li')[0]
    10         ul.removeChild(li)    //删除了UL里第一个子节点
    11     </script>
    12 </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>
  • 相关阅读:
    Traceroute侦测主机到目的主机之间所经路由情况的重要工具
    TCP/IP详解之IP协议
    Hello world
    [LeetCode] 198. 打家劫舍
    [LeetCode] 191. 位1的个数
    [LeetCode] 190. 颠倒二进制位
    python里的排序
    [LeetCode] 189. 旋转数组
    [LeetCode]187. 重复的DNA序列
    [LeetCode] 179. 最大数
  • 原文地址:https://www.cnblogs.com/Ziksang/p/5184838.html
Copyright © 2011-2022 走看看