JS插入新的节点

简介: insertBefore()语法:insertBefore(newchild,refchild)newchild 插入新的节点refchild 在此节点前插入新节点   Coffee  Tea function myFunction(){    var newItem=document.

insertBefore()

语法:

insertBefore(newchild,refchild)

newchild 插入新的节点

refchild 在此节点前插入新节点

 

<ul id="myList">

  <li>Coffee</li>

  <li>Tea</li>

</ul>

 

function myFunction(){

    var newItem=document.createElement("LI")

    var textnode=document.createTextNode("Water")

    newItem.appendChild(textnode)

    var list=document.getElementById("myList")

    list.insertBefore(newItem,list.childNodes[0]);

}

 

appendChild()

语法:

appendChild(newchild)

newchild 所添加的节点

 

<ul id="myList">

<li>Coffee</li>

<li>Tea</li>

</ul>

 

function myFunction(){

      var node=document.createElement("LI");

      var textnode=document.createTextNode("Water");

      node.appendChild(textnode);

      document.getElementById("myList").appendChild(node);

}

 

 

js写基础insertAfter()方法

//DOM没有提供insertAfter()方法

function insertAfter(newElement, targetElement){

     var parent = targetElement.parentNode;

     if (parent.lastChild == targetElement) {

// 如果最后的节点是目标元素,则直接添加。因为默认是最后

          parent.appendChild(newElement);

   }else {

         parent.insertBefore(newElement, targetElement.nextSibling);

//如果不是,则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面

    }

}

 

相关文章
|
2月前
|
前端开发 JavaScript 区块链
连接区块链节点的 JavaScript 库 web3.js
连接区块链节点的 JavaScript 库 web3.js
44 2
|
2月前
|
JavaScript 前端开发
用JavaScript正则表达式匹配对应字符串高亮显示,并过滤掉空格、<、>等HTML节点符号
用JavaScript正则表达式匹配对应字符串高亮显示,并过滤掉空格、<、>等HTML节点符号
|
2月前
|
JavaScript
Turndown 源码分析:五、节点相关`root-node.js`和`node.js`
Turndown 源码分析:五、节点相关`root-node.js`和`node.js`
40 0
|
2月前
|
JavaScript
js添加 删除 替换 插入节点所用的方法
js添加 删除 替换 插入节点所用的方法
26 0
|
8月前
|
JavaScript 前端开发
js中访问节点和创建节点的方法都有什么?
js中访问节点和创建节点的方法都有什么?
38 0
|
9月前
|
前端开发 JavaScript
探索JavaScript元素节点的属性和方法
探索JavaScript元素节点的属性和方法
21 0
|
2月前
|
前端开发 JavaScript 区块链
连接区块链节点的 JavaScript 库 web3.js
连接区块链节点的 JavaScript 库 web3.js
|
13天前
|
JavaScript
js 解析和操作树 —— 获取树的深度、提取并统计树的所有的节点和叶子节点、添加节点、修改节点、删除节点
js 解析和操作树 —— 获取树的深度、提取并统计树的所有的节点和叶子节点、添加节点、修改节点、删除节点
18 0
|
17天前
|
JavaScript BI
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
15 0
|
23天前
|
JavaScript 前端开发
JS中访问节点和创建节点的方法都有什么?
JS中访问节点和创建节点的方法都有什么?
14 0