document.createDocumentFragment()简单用法

最新推荐文章于 2023-11-06 20:05:35 发布
最新推荐文章于 2023-11-06 20:05:35 发布
阅读量1.1k 收藏
点赞数
分类专栏： JavaScript
原文链接：https://www.runoob.com/jsref/met-document-createdocumentfragment.html
版权

学习于菜鸟教程

//创建一个节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<ul><li>Coffee</li><li>Tea</li></ul>
<p id="demo">单击按钮更改列表项,使用createDocumentFragment方法,然后在列表的最后一个孩子添加列表项。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	//创建一个节点
	var d=document.createDocumentFragment();
	d.appendChild(document.getElementsByTagName("LI")[0]);
	//获取元素第一个子节点的值
	d.childNodes[0].childNodes[0].nodeValue="Milk";
	document.getElementsByTagName("UL")[0].appendChild(d);
};

</script>

</body>
</html>
小满1997
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
document.createElement（）的说明，详解
weixin_42306620的博客
06-27 5万+
这是动态的在HTML中添加一个元素的方法，下面是关于这个方法的详细用法，希望能够帮到你，谢谢document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。 ...
前端document的方法合集
沈行的博客
08-12 2135
document的方法
JavaScript_document对象_方法_创建元素
最新发布
Python_1981的博客
11-06 254
document.createTextNode方法用来生成文本节点（Text实例），并返回该节点。它的参数是文本节点的内容。document.createAttribute方法生成一个新的属性节点（Attr实例），并返回它。document.createElement方法用来生成元素节点，并返回该节点。
用js写入文档的方法document.createTextNode()等
weixin_40945354的博客
04-15 544
<!DOCTYPE html> <html> <head> <title>document.write() Example</title> </head> <body> <script type="text/javascript"> let div = document.createElement("div");
document.createEvent建立自定义事件
热门推荐
ganyuanmen的博客
12-28 1万+
document.createEvent用于创建事件，在DOM Level 2　的事件中就有HTMLEvents，MouseEvents，UIEvents事件类型。DOM Level 3增加很多事件类型，个人觉得其中最有用的是CustomEvent自定义事件。 为DOM元素创建自定义事件的步骤为： 一、创建事件：var ev = document.createEvent('CustomEve
关于javascript document.createDocumentFragment()
10-30
使用`document.createDocumentFragment()`的一个主要原因是提高DOM操作的效率。在上面的例子中，如果直接向DOM树添加元素，每次操作都会导致浏览器重新渲染页面，这在处理大量节点时会显著降低性能。通过先将元素...
Vue中fragment.js使用方法详解
10-20
更好的解决方案是使用`document.createDocumentFragment()`，它允许我们在内存中构建一个不实际存在于DOM树的文档片段，所有操作都不会触发页面重绘或回流。当文档片段完成构建后，我们可以将其所有子节点一次性添加...
Vue中fragment.js使用方法小结
11-21
本文将深入探讨Vue中`createDocumentFragment`的使用方法。 首先，让我们了解为什么直接通过循环插入大量元素是低效的。假设我们需要在一个ID为`'parent'`的节点上插入10000个`div`元素，最直观的方法是使用`...
JavaScript window.document的属性、方法和事件小结
12-04
JavaScript中的`window.document`是浏览器环境中访问HTML文档的主要接口，它包含了访问和操作网页内容的各种属性、方法和事件。在JavaScript编程中，`window`对象是全局对象，而`document`则是`window`下的一个子...
createElement与createDocumentFragment的点点区别小结
09-05
考虑以下示例，对比使用`createElement`和`createDocumentFragment`创建多个`<p>`元素的效率： ```javascript // 使用createElement for (var i = 0; i < arrText.length; i++) { var op = document.createElement...
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
10-29
讲这个方法之前，我们应该先了解下插入节点时浏览器会做什么。
JS性能优化之创建文档碎片(document.createDocumentFragment）
04-06 201
先了解下插入节点时浏览器会做什么。 在浏览器中，我们一旦把节点添加到document.body（或者其他节点）中，页面就会更新并反映出这个变化，对于少量的更新，一条条循环插入也会运行很好，也是我们常用的方法。代码如下： for(var i=0;i<5;i++) { var op = document.createElement("s...
document的createDocumentFragment()方法
weixin_30855099的博客
06-21 189
在《javascript高级程序设计》一书的6.3.5:创建和操作节点一节中，介绍了几种动态创建html节点的方法，其中有以下几种常见方法： · crateAttribute(name)：　　　　　　　用指定名称name创建特性节点 · createComment(text)：　　　　　　　创建带文本text的注释节点 · createDocumentFragment()：　　　...
document.createDocumentFragment 方法
weixin_30362801的博客
02-04 127
基本概念 document.createDocumentFragment方法会创建一个DocumentFragment对象，该对象是一个存在于DOM树之外的DOM节点。它有一个非常有用的特性：当DocumentFragment节点被插入DOM树时，插入DOM树的其实并不是DocumentFragment节点，而是它的所有子孙节点（即DocumentFragm...
JS中document.createElement()的用法
【Erica W】有问题，就问神奇海螺吧！
11-12 1万+
分析代码时，发现自己的盲点——document.createElement()，冲浪一番，总结了点经验。 document.createElement()是在对象中**创建一个对象**，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插
DOM 元素以及内容的增删改
iteval
07-17 172
一、DOM元素中的增加、删除、修改 1、创建元素 const div = document.createElement('div'); // 创建一个 div 元素 2、增加元素 const div = document.createElement('div'); // 创建一个 div 元素 document.getElementById('box').appendChild(div); // 创建好之后追加到 box 里面 document.getElementsByClassName('wapper
createDocumentFragment()用法总结
码飞_CC的博客
02-15 2945
createDocumentFragment()方法，是用来创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。 DocumentFragment节点不属于文档树，继承的parentNode属性总是null。它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是...
createDocumentFragment（）的使用
记录我的开发点滴.
04-16 136
前段时间在论坛上发的JS操作table的时候，有人指出了，在进行大量DOM操作的时候应该使用createDocumentFragment，所以了解了一下这个方法，在浏览器里面测试了一下，效果相差还是非常明显的，有兴趣的可以下载HTML页面文件下去看看！ [code="java"] createDocumentFragment的使用 function s...
document.createElement()的用法
aeon521730041的博客
09-01 2817
分析代码时，发现自己的盲点——document.createElement()，冲浪一番，总结了点经验。 document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore()...
createdocumentfragment方法
04-10
document.createDocumentFragment() 方法是用来创建一个文档片段，可以用来存储一组节点，然后插入到文档中。文档片段不是真正的 DOM 树中的一部分，它只是一个虚拟的容器，节点可以被添加到文档片段中，但是不会在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值