码迷,mamicode.com
首页 > Web开发 > 详细

js操作DOM对象(节点的增删改)

时间:2017-11-02 23:18:22      阅读:299      评论:0      收藏:0      [点我收藏+]

标签:element   name   code   lang   javascrip   pre   char   script   charset   

<!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">
    //首先获取页面中的第一个ul
    var 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  UL
    var newUl= ul.cloneNode(true);
    // 在body中增加 ul
    ul.parentNode.appendChild(newUl);
</script>



</body>
</html>

 

js操作DOM对象(节点的增删改)

标签:element   name   code   lang   javascrip   pre   char   script   charset   

原文地址:http://www.cnblogs.com/zwy0709/p/7774938.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!