JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例

本文实例讲述了JS实现DOM节点插入操作之子节点与兄弟节点插入操作。分享给大家供大家参考，具体如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net JS节点插入</title>
  <script>
    function showinsert(){ //添加子节点
      var str=document.getElementById("mydiv");
      var zif="段落五";
      var obj=document.createElement("p"); //添加哪类节点
      var objNode=document.createTextNode(zif); //创建文字节点
      str.appendChild(obj);
      obj.appendChild(objNode);
    }
    function showesideinsert(){ //添加兄弟节点
      var str=document.getElementById("mydiv");
      var zi="添加段落";
      var strBrother=str.children[1];
      var strNode=document.createElement("p");
      var strTextNode=document.createTextNode(zi);
      str.insertBefore(strNode,strBrother);
      strNode.appendChild(strTextNode);
    }
  </script>
</head>
<body>
  <div id="mydiv">
    <p onClick="showinsert()">段落一
    <p onClick="showesideinsert()">段落二
    <p>段落三
    <p>段落四
  </div>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试运行效果如下：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • js遍历子节点子元素附属性及方法

    复制代码 代码如下: // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); var childs = usernameEle.childNodes; for(var i = childs.length - 1; i >= 0; i--) { usernameEle.removeChild(childs[i]); } var username = document.createTextNod

  • Javascript removeChild()删除节点及删除子节点的方法

    Javascript removeChild()删除节点及删除子节点的方法

    下面给大家介绍Javascript removeChild()删除节点的方法,具体详情如下所示: 在Javascript中,只提供了一种删除节点的方法:removeChild(). removeChild() 方法用来删除父节点的一个子节点. 语法: parent.removeChild(thisNode) 参数说明: 参数 说明 thisNode 当前节点,即要删除的节点 parent 当前节点的父节点,即 thisNode.parentNode 例如,删除 id="demo" 的节

  • JavaScript实现获取某个元素相邻兄弟节点的prev与next方法

    本文实例讲述了JavaScript实现获取某个元素相邻兄弟节点的prev与next方法.分享给大家供大家参考,具体如下: /** * 获取相邻元素 * @param ele 参考物元素 * @param type 类型,上一个(1)or下一个(0) * @return 返回查找到的元素Dom对象,无则返回null */ function getNearEle(ele, type) { type = type == 1 ? "previousSibling" : "nextSi

  • 浅谈js的html元素的父节点,子节点

    parentNode和parentElement功能一样,childNodes和children功能一样.但是parentNode和childNodes是符合W3C标准的,可以说比较通用.而另外两个只是IE支持,不是标准,Firefox就不支持 示例: "parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 ,如下: <div id="parent"> <b id="child

  • JS获取子节点、父节点和兄弟节点的方法实例总结

    本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点 其中test的父标签id的值,div为标签的名字.getElementsByTagName是一个方法.返回的是一个数组.在访问的时候要按数组的形式访问. var a = document.getElementById("test").getElementsByTagName("div"); 2. 通过childNo

  • js 获取元素所有兄弟节点的实现方法

    比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色).我想把其他所有li--不包括红的li--的颜色也设为红色,此时,就需要获得红li的所有兄弟节点. 兄弟,就是和你平辈的,既不是上一级也不是下一级,而且可能有比你大的(兄),也可能比你小(弟).兄弟节点同理,下面是一个常规的获取兄弟节点的办法. 代码如下 function siblings(elm) { var a = []; var p = elm.parentNode.children; for(var i

  • javascript获取网页中指定节点的父节点、子节点的方法小结

    我们在实际的开发当中经常要获取页面中某个html元素,动态的更新该元素的样式.内容属性等. 那么如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种,下面是总结的一些方法. 1. 通过document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点. 如 今,已经出现了如prototype.Mootools等多

  • JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】

    本文实例讲述了JS常见DOM节点操作.分享给大家供大家参考,具体如下: DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的文档对象模型. 节点:根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 1.整个文档时一个文档节点. 2.每个HTML元素是元素节点. 3.HTML元素内的文本是文本节点. 4.每个HTML属性是属

  • 删除javascript所创建子节点的方法

    本文实例讲述了删除javascript所创建子节点的方法.分享给大家供大家参考.具体如下: js创建的节点,一时不知道如何删除...耗了一大堆时间 for(var i = 0; i < jsonList.length; i++ ){ var li_button = document.createElement("li"); li_button.className = "button"; var li_button_a = document.createElem

  • JS 获取HTML标签内的子节点的方法

    子节点的个数: document.getElementById("id").childNodes.length 注意: 标签开/闭合算2个节点 第几个子几点: document.getElementById("id").childNodes[n] 示例: 这里是 length-4 处,margin-left:20px 输出:length=8 实例: <div id="page_kx" style="text-align: cent

  • 利用vue.js插入dom节点的方法

    本文主要介绍的是vue.js插入dom节点的方法,下面话不多说,来看看详细的介绍吧. html代码: <div id="app"></div> js代码: var MyComponent = Vue.extend({ template: '<div>Hello World</div>' }) var myAppendTo = Vue.extend({ template:'<p>appendTo</p>' }) va

随机推荐