DOM对象控制HTML无素——详解3
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于DOM对象控制HTML无素——详解3的主要内容，如果未能解决你的问题，请参考以下文章