美文网首页
创建、插入和删除节点

创建、插入和删除节点

作者: A郑家庆 | 来源:发表于2018-08-13 21:11 被阅读0次
  • 创建、插入和删除节点

创建、插入和删除节点

1.创建节点
creatElement:创建元素节点
creatAttribute:创建属性节点,用法有点复杂,可以用setAttribute实现
creatTextNode:创建文本节点,用法有点复杂,可以用innerText实现

var image = document.createElement(img)
image.src = 'state/2.png'

2.复制节点
cloneNode()方法克隆所有属性以及它们的值。如果您需要克隆所有后代,请把 deep 参数设置 true,否则设置为 false。
例:

var clone = document.getElement('list').lastChild.cloneNode(true)
document.getElement('list1').appendChild(clone)

3.插入节点
appendChild()和insertBefore()
appendChild()是在需要插入的Element节点上调用的,它插入指定的节点使其成为那个节点的最后一个子节点,接收一个参数。
insertBefore()接收两个参数,第一个参数是待插入的节点,第二个参数是已存在的节点,新节点将插入该节点的前面。该方法是在新节点的父节点上调用,方法的第二个参数必须是该父节点的子节点。如果传递null作为第二个参数,insertBefore的行为类似appendChild(),它将节点插入在最后。
4.删除和替换节点
removeChild()方法是从文档数中删除一个节点,该方法在待删除的父节点上调用,并将需要删除的子节点作为参数传递给它。例:

n.parentNode.removeChild(n)

replaceChild()方法是删除一个子节点并用一个新的节点替换它。在父节点上调用该方法,第一个参数是新节点,第二个参数是需要替换的节点。
5.DocumentFragment
DocumentFragment是一种特殊的Node,它作为其他节点的临时容器。将这样创建

var frag = document.creatDocumentFragment()

DocumentFragment的特殊之处在于它使得一组节点被当做一个节点看待:比如给appendChild()传递一个DocumentFragment,其实是将该文档片段的所有子节点插入到文档中,而不包括片段本身。例:

var f = document.creatDocumentFragment()
while(n.lastChild)   f.appendChild(n.lastChild)
n.appendChild(f)

相关文章

  • 创建、插入和删除节点

    创建、插入和删除节点 创建、插入和删除节点 1.创建节点creatElement:创建元素节点creatAttri...

  • DOM操作-节点操作

    创建节点 创建属性节点 插入节点 删除节点 remove() 该节点包含的所有后代节点都会被删除 返回被已删除的节...

  • 原生JS对Dom的操作汇总

    查找 创建 插入节点 复制节点 删除节点 查找节点 替换节点

  • 2018-04-08JQ中DOM的操作

    回顾原生DOM操作 *获取节点 *创建节点 *遍历节点 *替换节点 *删除节点 *插入节点 *复制节点 JQ中的...

  • 2017-03-11 JS学习笔记 am

    创建节点 创建节点一般通过 document 设置属性 添加节点添加节点,一般通过它的父节点 删除节点 插入节点一...

  • jQuery中的DOM节点操作

    查找节点(略) 创建节点 插入节点 包裹节点 删除节点 复制节点 替换节点 节点遍历(略) 操作dom节点属性 ...

  • 2019-08-03 jquery 高级基础

    创建节点 元素内部擦入 同级插入 删除节点通常用empty 替换节点 复制节点 获取属性和设置属性 推荐使用pro...

  • 增删改查

    增 创建元素以tagName创建一个新的元素 在某个节点前插入一个子节点 删 删除一个子节点child,返回被删除...

  • 二叉查找树操作

    插入节点 查找节点 删除节点

  • DOM编程艺术-节点操作之创建、插入、修改、删除

    节点的创建、插入、修改和删除并不是一个个独立的操作,而是串联在一起。 1. 创建节点element=documen...

网友评论

      本文标题:创建、插入和删除节点

      本文链接:https://www.haomeiwen.com/subject/zbqpbftx.html