在JavaScript中创建内容以准备插入DOM的最佳方法是什么？

我已经看过一个关于创建内容并将其附加到DOM的视频教程。他认为，wrting像这样的字符串：与分别创建了以下这样一个对象在JavaScript中创建内容以准备插入DOM的最佳方法是什么？

jQuery('<h2 class=myClass>Hello world</h2>').appendTo('article');

是马虎：

jQuery('<h2></h2>', {text: 'Hello world', class 'myClass'}).appendTo('article');

我还是有点不服气，这是最好的方法做这件事。例如，我在这里创建了一个稍微更复杂的DOM创建示例： - http://jsperf.com/string-creation-dave使用建议的在JS中创建元素的方法比传递整个元素的字符串要慢很多。

因此，用JS可读性创建对象的唯一好处是什么？你如何在JS中创建元素？你只是通过字符串来插入到DOM中，或者你在JS中生成对象并以这种方式构建对象？

来源

2012-04-19 Dave Haigh

我不是专家，但从我听说的，使用后一种方法的原因之一是为了减少'JS'中'HTML'的数量，因为它不属于那里，因为增加了可读性。就可读性而言，您可以在代码中使用反斜线作为换行符，如下所示：http://jsfiddle.net/lollero/WYnqx/ – Joonas 2012-04-19 10:24:04

最简洁的解决方案是通过createElement方法创建元素，设置其属性并将其插入到dom中。

如果你有更多的元素，你建立相应的树，并在完成后将整个树插入到dom中。

例如from MDN：

function addElement() 
{ 
    // create a new div element 
    // and give it some content 
    newDiv = document.createElement("div"); 
    newContent = document.createTextNode("Hi there and greetings!"); 
    newDiv.appendChild(newContent); //add the text node to the newly created div. 

    // add the newly created element and it's content into the DOM 
    my_div = document.getElementById("org_div1"); 
    document.body.insertBefore(newDiv, my_div); 
}

但严重的，谁愿意写这样的代码;）我个人想坚持自己的第一个例子，什么适合你。

来源

2012-04-19 10:13:19 Christoph

而且自从前一段时间以来，它至少在Chrome中表现优于.innerHTML。 – 2012-04-19 10:15:16

@Christoph当你说'坚持你的第一个例子'，你的意思是jsperf测试页上的第一个吗？因此我在JS中构建对象。你是否认为这种方法更整洁，更清楚，因此会将整个对象作为字符串传递的性能好处（如jsperf测试的第二个例子）？ – 2012-04-19 10:24:07

@DaveHaigh我可能是错的，但是如果你想一个真实的例子：** 1。**你有一个包含4个项目的盒子。任务是在桌子上举起它。 ** 2。**你有一个空盒子。任务是首先将4个物品放入该盒子中，然后将其提起放在桌子上。哪种情况需要更少的时间？情景1.将类似于你在＃1例子中做的事情，2.类似于你在＃2例子中做的事情。（我不知道jquery如何组装每个实际的机制，但常识告诉我＃1已经组装好了，＃2不是。） – Joonas 2012-04-19 11:00:38

在JavaScript中创建内容以准备插入DOM的最佳方法是什么？

回答

相关问题