js操作DOM对象(节点的增删改)
生活随笔
收集整理的這篇文章主要介紹了
js操作DOM对象(节点的增删改)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>節點的增刪改</title>
</head>
<body>
<ul><li>大家辛苦了1</li><li>大家辛苦了2</li><li>大家辛苦了3</li><li>大家辛苦了4</li><li>大家辛苦了5</li><li>大家辛苦了6</li><li>大家辛苦了7</li><li>大家辛苦了8</li><li>大家辛苦了9</li><li>大家辛苦了10</li><li>大家辛苦了11</li><li>大家辛苦了12</li>
</ul><script type="text/javascript">//首先獲取頁面中的第一個ulvar ul= document.getElementsByTagName("ul")[0];//創建一個新的節點var newLi=document.createElement("li");//給新節點的增加內容newLi.innerHTML="<h1>哈哈</h1>";//在第7 個位置之前 把新增的li放入var needLi= ul.getElementsByTagName("li")[6];//ul.insertBefore(newLi,needLi); // 把newLi放在needLi之前//替換指定的節點var repLi= ul.getElementsByTagName("li")[9];ul.replaceChild(newLi,repLi);//刪除指定的節點
ul.removeChild(newLi);//clone ULvar newUl= ul.cloneNode(true);// 在body中增加 ul
ul.parentNode.appendChild(newUl);
</script></body>
</html>
?
轉載于:https://www.cnblogs.com/zwy0709/p/7774938.html
總結
以上是生活随笔為你收集整理的js操作DOM对象(节点的增删改)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: C++设计模式-AbstractFact
- 下一篇: Libevent源码分析-----TAI