关于documentFrgament 文档片段的简单理解

documentFragment 即文档片段，也可以理解为是一个暂时储存数据的仓库。

好处：可以将多行代码一次性的放到文档中，减少页面的渲染次数，用于提高

创建时的性能问题。使用不多，可做了解

使用需要三个步骤

1.创建一个文档片段

2.将元素追加到这个文档片段中

3.将文档片段追加到页面中

不过也有缺点：不支持innerHTML属性

解决方法：对于简单结构，直接追加，没有任何问题

对于复杂结构，先用html的结构创建好，再放到代码片段中

简单结构

 var df = document.createDocumentFragment();// 创建简单结构：例如10个divfor (var i = 0; i < 10; i++) {var div = document.createElement('div');div.innerText = '这是div';// 将需要创建的元素添加到df中
            df.appendChild(div);}

复杂结构

// 创建复杂结构: 例如 ul>li*5 设置不同内容 ol>li*5 不同内容var ul = document.createElement('ul');ul.innerHTML ='<li title="abc"><a href="xx18.html">内容111</a></li>\<li class="hehe"><a href="xx21.html">内容266</a></li>\<li class="hehe"><a href="xx23.html">内容312</a></li>\<li title="abc"><a href="xx44.html">内容14</a></li>\<li><a href="xx12.html">内容52</a></li>';var ol = document.createElement('ol');ol.innerHTML ='<li title="abc"><a href="xx128.html">内容1211</a></li>\<li class="hehe"><a href="xx221.html">内容2626</a></li>\<li class="hehe"><a href="xx23.html">内容3122</a></li>\<li title="abc"><a href="xx44.html">内容124</a></li>\<li><a href="xx12.html">内22容52</a></li>';
df.appendChild(ul);df.appendChild(ol);// 将df设置到页面中显示document.body.appendChild(df);

转载于:https://www.cnblogs.com/qdxbls/p/11151725.html

关于documentFrgament 文档片段的简单理解相关推荐

多模态文档LayoutLM版面智能理解技术演进-纪传俊
多模态算法兴起的背景办公文档是各行各业最基础也是最重要的信息载体,不管是金融.政务.制造业.零售行业等等,各种类型的文档都是业务流转过程中必不可少的数字资料.以银行信贷为例,一笔信贷业务在贷前贷中到 ...
AIGC席卷智慧办公，金山办公如何架构文档智能识别与理解的通用引擎？
如今,智慧办公是企业办公领域数字化转型的题中之义.作为国内最早开发的软件办公系统之一,金山办公如何应用深度学习实现复杂场景文档图像识别和技术理解?本文将从复杂场景文档的识别与转化.非文本元素检测与文字 ...
boost::multiprecision模块将 std::numeric_limits 用作 multiprecision.qbk 上的多精度文档片段的示例
boost::multiprecision模块将 std::numeric_limits 用作 multiprecision.qbk 上的多精度文档片段的示例实现功能 C++实现代码实现功能 bo ...
DOM（三）——创建删除元素及优化（文档片段）
文章目录一.添加一个新元素 (1)创建一个新的空元素对象 (2)为新元素添加必要属性 (3)将新元素添加到DOM树上指定父元素下,浏览器才能显示出新元素 a.在父元素下末尾追加新元素 b. 在父元素 ...
DocumentFragment文档片段示例
DocumentFragment文档片段属于Document的一个子集,但是效率却高很多,因为DocumentFragment构造的DOM树与结点,都是存放在内存里面,浏览器渲染也只需要一次,所以非常 ...
python读取word文档并做简单的批量文档筛选
python读取word文档并做简单的批量文档筛选最近参与了一项解析大量的word文档(试验报告形式)的工作,因为其中包含着一些对项目无意义的报告,所以要进行初步地筛选,通过查阅资料发现了pytho ...
mac pdf去水印_今天才知道，Word、PDF文档去水印这么简单！一键水印说拜拜
在工作中,我们经常都会给一些重要文件加上水印,不过有时候我们要去掉水印就有点麻烦了,很多小伙伴都不知道怎么将文档的水印删除,今天小编就跟大家分享各种水印的删除方法,针对不同情况,我们可以采取不同的方法 ...
百度文档搜索与Google文档搜索的简单比较
很多有具有参考价值的资料,比如学生写论文报告,老师做课件,找工作准备简历都需要参考其他人的成果.在互联网上,这类资料一般不是普通的html网页,而是以Word.ppt(s).Excel.pdf等格式存 ...
java 创建word文件_java基于feemarker 生成word文档（超级简单）
问题由来: 开发个新需求,需要按规定导出word文档,文档截图如下因为之前没做过这个,一脸懵B啊,导出excel和txt倒是经常接触到,对于这个word这种格式不严谨的文件怎么处理呢? 技术选型:可 ...

关于documentFrgament 文档片段的简单理解

关于documentFrgament 文档片段的简单理解相关推荐

最新文章

热门文章