Question

我已经看过一个关于为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中生成对象并以这种方式构建对象？

Answer 1

最干净的解决方案是通过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);
}

但是很认真，谁想写这样的代码;）就个人而言，我会坚持你的第一个例子，不管你是谁。

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

1 个答案: