• 技术文章 >web前端 >js教程

    javascript如何删除和添加元素

    青灯夜游青灯夜游2021-07-16 11:05:22原创143

    在javascript中,可以利用“父元素对象.appendChild(新元素)”或“父元素对象.insertBefore(新元素,插入点)”语句在父元素中添加新元素;可以利用“父元素对象.removeChild(子元素)”语句删除子元素。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    javascript删除和添加元素

    1、添加元素

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>javascript添加元素</title>
    <script type="text/javascript" >
    	window.onload = function(){
    	  var box = document.getElementById("box");  //通过id属性值获得DIV
    	};
    	function addNode(){//在末尾插入新节点
    	  var p = document.createElement("p"); //创建需要添加的元素节点
    	  p.innerHTML = "段落三(添加的内容)";
    	  box.appendChild(p); //将段落节点添加到box的子节点列表后面
    	}
    	function insertNode(){//在开头插入新节点
    	  var h2 = document.createElement("h2"); // 创建一个H2元素节点
    	  h2.innerHTML = "二级标题(插入的内容)";
    	  var oP = document.getElementsByTagName("p")[0]; //获取第一个段落
    	  box.insertBefore(h2,oP); //在第一个段落前面插入一个H2标题
    	}
    </script>
    </head>
    <body>
      <div id="box">
         <p>段落一</p>
         <p>段落二</p>
      </div>
      <a href="javascript:addNode()">在末尾插入新节点</a>
      <a href="javascript:insertNode()">在开头插入新节点</a>
    </body>
    </html>

    效果图:

    1.gif

    说明:

    appendChild() 方法可向当前节点的子节点列表的末尾添加新的子节点。用法如下:

    appendChild(newchild)

    insertBefore() 方法可向当前节点的子节点列表的开头添加新的子节点。用法如下:

    insertBefore(newchild, refchild)

    document.createElement()创建元素节点调用。

    2、删除元素

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>javascript删除元素</title>
    <script type="text/javascript" >
    
    	function deleteNode(){//删除节点
    	  var oP = document.getElementsByTagName("p")[0];//获取第一个段落
    	  box.removeChild(oP);//删除第一个段落
    	}
    </script>
    </head>
    <body>
      <div id="box">
         <p>段落一</p>
         <p>段落二</p>
      </div>
      <a href="javascript:deleteNode()">删除节点</a>
    </body>
    </html>

    效果图:

    2.gif

    说明:

    removeChild() 方法可以删除父节点上的一个子节点。

    语法:

    parentNode.removeChild(nodeName)

    【推荐学习:javascript高级教程

    以上就是javascript如何删除和添加元素的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:javascript是什么格式的文件 下一篇:javascript创建新节点方法是什么
    VIP会员

    相关文章推荐

    • javascript中如何使用prompt方法• 简述什么是JavaScript对象• javascript中dom常用方法有哪些?• Python为什么像JavaScript• 如何处理javascript内存泄露• Javascript中什么是私有成员

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网