如何高效地创建和追加多个 dom 元素

Question

我正在 DOM 上构建 10 个按钮，并想看看是否有更有效的方法来构建它们，因为调用createElement和appendChild 10 次似乎很奇怪。

<script>
function makeAlertButtons () {
  var container = document.createElement("div")
  container.setAttribute('id', "container")
  document.getElementsByTagName('body')[0].appendChild(container)
  for (var x = 1; x <=10; x++) {
    var butt = document.createElement("button")
    butt.appendChild(document.createTextNode(x))
    document.getElementById("container").appendChild(butt)
  }
  document.getElementById("container").addEventListener('click', function (e) {
    alert(e.target.textContent)
  })
}
makeButtons()
</script>

Answer 1

您可以通过重用容器变量和移动来优化您的代码

document.getElementsByTagName('body')[0].appendChild(container);

循环之后

 function makeAlertButtons () { var container = document.createElement("div") container.setAttribute('id', "container") for (var x = 1; x <=10; x++) { var butt = document.createElement("button") butt.appendChild(document.createTextNode(x)) container.appendChild(butt) } document.getElementsByTagName('body')[0].appendChild(container); container.addEventListener('click', function (e) { alert(e.target.textContent) }) } makeAlertButtons();

Answer 2

“更高效”？ 如果 DOM 只是用 HTML 构建的，那么在执行时会更有效率。 如果您希望 JavaScript 更高效，那么您需要通过使用外部<script type='text/javascript' src='yourJavaScriptPage.js'></script>标记将 JavaScript 缓存在客户端浏览器中就像你的<head>一样。 我在这里包含一些代码，可以教你一些东西：

var pre = onload, doc, bod, htm, C, T, E, makeAlertButtons; // if using technique on multiple pages change pre var
onload = function(){ // window.onload Event
if(pre)pre(); // if previous onload execute it

doc = document; bod = doc.body; htm = doc.documentElement;
C = function(e){
  return doc.createElement(e);
}
T = function(n){
  return doc.getElementsByTagName(n);
}
E = function(id){
  return doc.getElementById(id);
}
makeConsoleButtons = function(count){
  var container = C('div');
  container.id = 'container';
  for(var i=1,l=count+1; i<l; i++){
    var butt = C('input');
    butt.type = 'button'; butt.value = i;
    butt.onclick = function(){ // note lazy style will overwrite - but it's faster to type
      console.log(this.value); // alert can create problems in old IE
    }
    container.appendChild(butt);
  }
  bod.appendChild(container);
}
makeConsoleButtons(10);

} // end window.onload

希望你学到了一些东西。

Answer 3

我将此答案用于另一个问题，但由于它们基本上是相同的，所以我也会在这里发布。

使用字符串在元素上设置innerHTML属性是创建多个元素的最有效方式，因为我们将删除元素的创建到浏览器：

const el = document.createElement('div');

el.innerHTML = `
<h1>Page Title</h1>
<p>Lorem, ipsum dolor.</p>
<input value="Lorem ipsum dolor sit amet." >
<button id="btn">Click Me</button>
`;

const root = document.querySelector('#app');
root.appendChild(el);

它支持现代浏览器。 比手动迭代元素更快。 另外，它比以编程方式创建这些元素要干净得多。

您可以使用现有的元素。 只需选择元素并插入内容：

document.querySelector('#app').innerHTML = `
<h1>Page Title</h1>
<p>Lorem, ipsum dolor.</p>
<input value="Lorem ipsum dolor sit amet." >
<button id="btn">Click Me</button>
`;

如何高效地创建和追加多个 dom 元素

问题描述

3 个解决方案

解决方案1
1 2016-10-21 23:25:22

解决方案2
0 2016-10-21 23:51:59

解决方案3
0 2022-05-20 13:48:06

如何高效地创建和追加多个 dom 元素

问题描述

3 个解决方案

解决方案1 1 2016-10-21 23:25:22

解决方案2 0 2016-10-21 23:51:59

解决方案3 0 2022-05-20 13:48:06

解决方案1
1 2016-10-21 23:25:22

解决方案2
0 2016-10-21 23:51:59

解决方案3
0 2022-05-20 13:48:06