js 将html字符串转换成node节点三种方式

短命女 2021-07-25 02:04 949阅读 0赞

1、innerHTML

<script>
     function createNode(txt) { 
      const template = `<div class='child'>${ txt}</div>`;
      let tempNode = document.createElement('div');
      tempNode.innerHTML = template;
      return tempNode.firstChild;
     }
     const container = document.getElementById('container');
     container.appendChild(createNode('hello'));
    </script>

2、 DOMParser

function createDocument(txt) { 
      const template = `<div class='child'>${ txt}</div>`;
      let doc = new DOMParser().parseFromString(template, 'text/html');
      let div = doc.querySelector('.child');
      return div;
     }
      
     const container = document.getElementById('container');
     container.appendChild(createDocument('hello'));

3、 DocumentFragment
    
    	DocumentFragment 对象表示一个没有父级文件的最小文档对象。
    	它被当做一个轻量版的 Document 使用，用于存储已排好版的或尚未打理好格式的XML片段。
    	最大的区别是因为DocumentFragment不是真实DOM树的一部分，它的变化不会引起DOM树的重新渲染的操作(reflow) ，且不会导致性能等问题。

function createDocumentFragment(txt) { 
      const template = `<div class='child'>${ txt}</div>`;
      let frag = document.createRange().createContextualFragment(template);
      return frag;
     }
     
     const container = document.getElementById('container');
     container.appendChild(createDocumentFragment('hello'));

发表评论取消回复

表情：

评论列表（有 0 条评论，949人围观）

还没有评论，来说两句吧...

相关阅读

相关将字符串转换为JavaScript对象（Node.js编程）

在Node.js中，我们经常需要将字符串转换为JavaScript对象。这在处理来自外部源（如API响应或文件读取）的数据时非常常见。本文将介绍如何在Node.js中将字符串转

爱被打了一巴掌/ 2023年10月16日 11:52/ 0 赞/ 1 阅读

相关将字符串转换为DOM节点

My original post featured `DOMParser`, a JavaScript API for converting HTML strings into

ゝ一纸荒年。/ 2023年02月22日 01:25/ 0 赞/ 3 阅读

相关 js中将字符串转换成json的三种方式

使用ajax的开发项目过程中，经常需要将json格式的字符串返回到前端，前端解析成js对象（JSON ）。 ECMA-262(E3) 中没有将JSON概念写到标准中，还好在[

雨点打透心脏的1/2处/ 2022年09月18日 09:59/ 0 赞/ 158 阅读

相关 js中将字符串转换成json的三种方式

js中将字符串转换成json的三种方式 1，eval方式解析，恐怕这是最早的解析方式了。如下： function strToJson(str){ va

深藏阁楼爱情的钟/ 2022年06月18日 07:45/ 0 赞/ 235 阅读

相关 js将字符串转换成json的三种方式

1,js自带的eval函数，其中需要添加小括号eval('('+str+')'); function strToJson(str)\{ var json = eval(

╰+攻爆jí腚メ/ 2022年06月17日 11:59/ 0 赞/ 393 阅读

相关 js 字符串转换成数字的三种方法

本文转载自：[http://www.jb51.net/article/35005.htm][http_www.jb51.net_article_35005.htm] 在js读

r囧r小猫/ 2022年06月17日 09:21/ 0 赞/ 228 阅读

相关 js将时间搓转换成字符串格式

var timestamp = '1425553097'; var d = new Date(timestamp \ 1000); //根据时间戳生成的时间对象

雨点打透心脏的1/2处/ 2022年05月17日 06:49/ 0 赞/ 223 阅读

相关 js将字符串转换成对象和数组eval

代码如下: var test='{ colkey: "col", colsinfo: "NameList" }' 把文本转化为对象 var te

墨蓝/ 2022年05月14日 12:52/ 0 赞/ 531 阅读

相关 js 将html字符串转换成node节点三种方式

1、innerHTML <script> function createNode(txt) { const template = `<

短命女/ 2021年07月25日 02:04/ 0 赞/ 950 阅读

相关【JS】jQuery中将数组转换成字符串

1、push()将元素依次添加至数组； 2、join()将数组转换成字符串，里面可以带参数分隔符，默认【,】 <script type = text/javascr

秒速五厘米/ 2021年07月24日 11:18/ 0 赞/ 630 阅读