<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'));
最近写js方法的时候，用到了appendChild()方法，这个方法里的参数必须是node节点，但是获取到的是Html String字符串，所以就需要把Html String字符串转化为node 节点，从而使用appendChild();
static parseElement(htmlString){
return new DOMParser().parseFromString(htmlStr...
Node.js 快速 HTML 解析器指南
node-fast-html-parserA very fast HTML parser, generating a simplified DOM, with basic element query support.项目地址:https://gitcode.com/gh_mirrors/no/node-fast-html-parser
No...
最近在优化页面性能，项目中使用了jquery，但是我们项目主要将jquery用于发送ajax请求，所以决定去掉jquery，在去掉jquery的时候发现要用原生javascript 实现将html string 转化为node 节点的过程，查了资料发现一个之前从未接触过的方法，DOMParser,
static parseElement(htmlString){
return new ...
将字符串动态转换为DOM节点，在开发中经常遇到，尤其在模板引擎中更是不可或缺的技术。
字符串转换为DOM节点本身并不难，本篇文章主要涉及两个主题：
1 字符串转换为HTML DOM节点的基本方法及性能测试
2 动态生成的DOM节点添加到文档中的方法及性能测试
本文的示例： 有如下代码段
<!DOCTYPE html>
<html lang="en">
<head&...
