美文网首页
《(创建、修改、删除、克隆)元素》

《(创建、修改、删除、克隆)元素》

作者: 蔡森屿 | 来源:发表于2018-05-06 22:53 被阅读0次

创建元素

createElement()

createElement方法用来生成HTML元素节点。

var newDiv = document.createElement("div");

createElement方法的参数为元素的标签名,即元素节点的tagName属性。如果传入大写的标签名,会被转为小写。如果参数带有尖括号(即<和>)或者是null,会报错。

createTextNode()

createTextNode方法用来生成文本节点,参数为所要生成的文本节点的内容。

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");

上面代码新建一个div节点和一个文本节点

createDocumentFragment()

createDocumentFragment方法生成一个DocumentFragment对象。

var docFragment = document.createDocumentFragment();

DocumentFragment对象是一个存在于内存的DOM片段,但是不属于当前文档,常常用来生成较复杂的DOM结构,然后插入当前文档。这样做的好处在于,因为DocumentFragment不属于当前文档,对它的任何改动,都不会引发网页的重新渲染,比直接修改当前文档的DOM有更好的性能表现。

修改元素

appendChild()

在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
insertBefore()

在某个元素之前插入元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
replaceChild()

replaceChild()接受两个参数:要插入的元素和要替换的元素

newDiv.replaceChild(newElement, oldElement);

删除元素

删除元素使用removeChild()方法即可

parentNode.removeChild(childNode);

clone元素

cloneNode()方法用于克隆元素,方法有一个布尔值参数,传入true的时候会深复制,也就是会复制元素及其子元素(IE还会复制其事件),false的时候只复制元素本身

node.cloneNode(true);

参考"饥人谷"

相关文章

  • 《(创建、修改、删除、克隆)元素》

    创建元素 createElement() createElement方法用来生成HTML元素节点。 createE...

  • js小知识3

    一、DOM 二、获取元素 三、创建、添加、删除、克隆 元素

  • 在JS中动态创建,删除,克隆元素

    在JS中动态创建,删除,克隆元素 createElement创建元素 createTextNode创建文本对象 a...

  • 创建、修改、删除元素

    创建元素createElement()用来生成HTML元素节点。参数为元素的标签名,即元素节点的tagName属性...

  • Python常见的列表及列表解析

    声明&创建 增加元素 删除元素 修改元素 查找和统计

  • jQuery的基础功能

    Get started 获取元素 闭包&链式操作 创建元素 移动元素 修改元素 复制和删除元素 获取元素 使用jQ...

  • Python tuple总结

    特性 1、有序2、创建完毕后不能修改元素,不能删除元素(没有append( )、pop( )、insert( )等...

  • 前端开发之JS(对象)

    创建对象 增加属性和方法 修改 删除 元素构建 constructor toString valueOf hasO...

  • 元组

    与列表的区别 都是有序的集合 元组不可修改 元组的操作 创建元组 基本操作 访问元素 修改元素(不允许) 删除元素...

  • Python 元组

    元组的创建和删除 访问元组元素 修改元组元素 元组推导式 元组与列表的区别

网友评论

      本文标题:《(创建、修改、删除、克隆)元素》

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