javascript - Javascript附加；什么被认为是最佳实践？

Question

谁能解释在 javascript 中附加的最佳实践是什么？

var element = document.createElement('p');
element.innerHTML = 'This is appended' ;
var div = document.getElementById('div');
div.appendChild(element);

或者

var div = document.getElementById('div');
div.innerHTML = '<p>This is appended</p>';

我看到很多人在 jQuery 中这样做：

$('#div').append('<p>This is appended</p>');

但我一直这样做：

var element = document.createElement('p');
element.innerHTML = 'This is appended' ;
$('#div').append(element);

先感谢您

Answer 1

如果你使用 jQuery，绝对没有错：

$('#div').append('<p>This is appended</p>');

它的代码更少，步骤更少。

Answer 2

IMO，当您使用 DOM 时，请将其视为 DOM 而不是字符串。

换句话说，不要使用标记来创建元素或文本节点。使用 DOM 创建方法。

document.getElementById('div')
        .appendChild(document.createElement('p'))
        .appendChild(document.createTextNode('This is appended'));

---

微软的.innerHTML发明可能很诱人，也许在紧要关头很有用，但我通常会避免它。

您可以使用助手减少上述方法的冗长性。

Answer 3

我通常使用 jQuery 构建一个元素。

var paragraph = $("<p />", {
  className : "someClass",
  text : "this is appended"
})


div.append(paragraph)

我相信这种方法比直接注入 HTML 更受欢迎，因为它对 DOM 的侵入性较小。