JS 将字符串格式html代码插入页面中

使用原生 JS 经常会遇到将 html 字符串往页面的的某个节点插入，这里介绍几种插入方式

插入方式

一、使用 innerHTML 方式

这种方式是将你的 html 结构的字符串直接给某个节点的 innerHTML 属性：

var name = 'leo';
var htmlStr = `<div><span>${name}</span></div>`

document.querySelector('.box').innerHTML = htmlStr;

上面的innerHTML方法是将目标元素的内部所有内容替换，不能追加和插入某个节点的前后位置。

二、使用 appendChild 或者 insertBefore 的方式

这种方式的参数必须是 node 节点。所以需要我们先将 html 字符串转换为 node 节点

将字符串格式的 html 转为 node 插入文档

一、使用 DOMParser

DOMParser 接口提供了将 XML 或 HTML 源代码从字符串解析为DOM的功能 Document。DOMParser() 构造函数新建一个 DOMParser 对象实例，可以通过这个对象的 parseFromString() 方法将字符串解析为 DOM 对象。

DOMParser 实例的 parseFromString 方法可以用来直接将字符串转换为document 文档对象。有了document之后，我们就可以利用各种 DOM Api来进行操作了。

 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'));

二、使用 DocumentFragment

document.createRange() 返回一个 range 对象，range 对象表示文档中的连续范围区域，如用户在浏览器窗口用鼠标拖动选择的区域，利用 document.createRange().createContextualFragment 方法，我们可以直接将字符串转化为 DocumentFragment 对象

var name = 'leo';
var template = `<li>${name}</li>`;
var frag = document.createRange().createContextualFragment(faceInfoItem);
var list = document.querySelector('.box ul');

//如果使用 appendChild
list.appendChild(frag);


//如果使用 insertBefore ,insertBefore 即使第二个参数为 null 也能插入进去，就像append了一个元素
list.insertBefore(frag,list.firstElementChild);

 

利用documentFragment批量插入节点，当我们每次单独创建节点并插入文档时会造成很大的性能浪费，可以先把节点放入documentFragment 中 最后统一放入文档中。

var temp = function(id){
    return `<li><span>now id is ${id}</span></li>`;
}

var createFrag = function(temp){
    return document.createRange().createContextualFragment(temp);
}

var box = document.querySelector('.box ul');
var docFrag = document.createDocumentFragment();

for(let i=0;i<100;i++){
    docFrag.appendChild(createFrag(temp(i)));
}

box.appendChild(docFrag);

 

利用 documentFragment 和 innerHTML 封装一个 类似于 jquery 的 append 方法，既可以插入节点，又可以插入字符串：

function append(container,text){
    if(typeof text === 'object'){
        container.appendChild(text);
        return ;
    }
    let box = document.createElement('div');
    let frag = document.createDocumentFragment();
    box.innerHTML = text;
    while(box.firstElementChild){
        frag.appendChild(box.firstElementChild);
    }
    container.appendChild(frag);
}

//测试：
//1.加入字符串
var box = document.querySelector('.box ul');
var temp = `
    <li>我是li3<span>6666</span></li>
    <li>我是li2</li>
    <li>我是li1</li>
`;
var arr = [1,22,4,5,6,6,7,8,90,'123','666666'];
var lis = '';
arr.forEach(item=>{
    lis+= `<li>${item}</li>`;
})

append(box,lis);

//2.插入元素节点
var li = document.createElement('li');
li.appendChild(document.createTextNode('我是text node 节点'))
append(box,lis);