原生JS 如何拼接字符串添加标签

Question

例如jquery 的 append

当有N个标签需要添加 比如

var str = '<div>代码1</div><span>代码2<span>......代码N'

//如果是jquery 直接写

$('#dom').append(str)

那么在原生JS里面如果做呢？就是这种 要在某个标签内添加 N 个新的标签

想法是 能否整合所有需要添加的标签成为一个字符串，然后一次性全部添加

如果使用innerHTML的话 是否会重新渲染原有标签

想使用appendChild又不知道怎么写才对

求解答下，最好能有一个例子

Answer 1

var node=document.createElement("div");&nbsp; &nbsp; var textnode=document.createTextNode("代码1");&nbsp; &nbsp; node.appendChild(textnode);&nbsp; &nbsp; document.getElementById("dom").appendChild(node);

Answer 2

一个一个创建对象太繁琐了。可以试试下面的方法。var str = '<div>代码1</div><span>代码2<span>......代码N';function createDom(html){&nbsp; &nbsp; var a = document.createElement('div');&nbsp; &nbsp; a.innerHTML = html;&nbsp; &nbsp; return a.childNodes[0];}var ele = createDom(str);document.body.appendChild(ele);

Answer 3

你的重点如果是在拼接字符串当中，那么你该知道，拼接是通过+来拼接的，诸如:'<div>代码1'+&nbsp; &nbsp; '<span>代码2</span>'+&nbsp; &nbsp; ....'</div>';或者如果使用es6的模板字符串，你可以:`<div>代码1&nbsp; &nbsp; <span>代码2</span>&nbsp; &nbsp; ....&nbsp;</div>`如果你不确定要添加多少个标签，并且不确定添加的是哪种标签，你可以封装成一个函数:&nbsp; &nbsp;function createElement(tagNameArr,textArr){&nbsp; &nbsp; &nbsp; &nbsp; var tagStr = '';&nbsp; &nbsp; &nbsp; &nbsp; for(var i = 0;i < tagNameArr.length;i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tagStr += '<'+tagNameArr[i]+'>' + textArr[i] + '</'+tagNameArr[i]+'>';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return tagStr;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;传入一个标签数组以及对应的标签包含文本数组，拼接成一个字符串，并返回这个字符串。