javascript - 我可以重用 DOM 元素吗？

Question

DOM 中的许多对象的状态都会发生变化，但有些似乎不会。 假设您有两个选择，每个选择 A、B、C。每个select都有一个当前值，但是如果A,B,C的值永远不变，是否可以共享？示例:

var opt = [
  document.createElement("option"),
  document.createElement("option"),
  document.createElement("option")
];
opt[0].value = 'a';
opt[1].value = 'b';
opt[2].value = 'c';
var select1 = document.createElement("select");
var select2 = document.createElement("select");

for (var i = 0; i < opt.length; i++) {
  select1.appendChild(opt[i]);
  select2.appendChild(opt[i]);
}

Answer 1

正如 pointy 指出的那样，将 dom 元素附加到新父元素会将其从旧元素中删除。但是，您可以在将选项附加到第二个选择之前克隆您的选项:

var opt = [
  document.createElement("option"),
  document.createElement("option"),
  document.createElement("option")
];
opt[0].text = 'a';
opt[1].text = 'b';
opt[2].text = 'c';
var select1 = document.createElement("select");
var select2 = document.createElement("select");

for (var i = 0; i < opt.length; i++) {
  select1.appendChild(opt[i]);
  select2.appendChild(opt[i].cloneNode(true));
}
document.getElementsByTagName("body")[0].appendChild(select1);
document.getElementsByTagName("body")[0].appendChild(select2);