原生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");

    var textnode=document.createTextNode("代码1");

    node.appendChild(textnode);

    document.getElementById("dom").appendChild(node);

Answer 2

一个一个创建对象太繁琐了。可以试试下面的方法。

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

function createDom(html){

    var a = document.createElement('div');

    a.innerHTML = html;

    return a.childNodes[0];

}

var ele = createDom(str);

document.body.appendChild(ele);

Answer 3

你的重点如果是在拼接字符串当中，那么你该知道，拼接是通过+来拼接的，诸如:

'<div>代码1'+

    '<span>代码2</span>'+

    ....

'</div>';

或者如果使用es6的模板字符串，你可以:

`

<div>代码1

    <span>代码2</span>

    ....

 </div>

`

如果你不确定要添加多少个标签，并且不确定添加的是哪种标签，你可以封装成一个函数:

   function createElement(tagNameArr,textArr){

        var tagStr = '';

        for(var i = 0;i < tagNameArr.length;i++){

            tagStr += '<'+tagNameArr[i]+'>' + textArr[i] + '</'+tagNameArr[i]+'>';

        }

        return tagStr;

    }

    

    

传入一个标签数组以及对应的标签包含文本数组，拼接成一个字符串，并返回这个字符串。