在设计 html 界面元素时，DOM 根据某些事件显示/隐藏是一个非常常见的场景。我的问题很简单，但每次遇到这个问题时，我总是想知道：将元素硬编码在 html 中并简单地切换显示属性（例如使用 .show/.hide）或动态添加/删除它们是否“更好”根据需要通过JS？两者的实现都很简单，但我忍不住想知道它们如何比较，以及使用其中一种相对于另一种是否有任何优点/缺点。
在某些情况下，例如在多个地方逐字使用同一个元素时，动态创建 DOM 似乎是有意义的，但另一方面，理论上对它们进行硬编码更易于维护，因为您可以四处移动 DOM并根据需要更改它们，只要 jQuery 的选择器仍然相同，它们就会按预期工作。一般来说，从设计师的角度来看，硬编码似乎是可行的方法，但我期待着一些想法，也许我在这里可能会忽略的事情。
编辑：“硬编码”是指根本不通过 JS 插入的元素；也就是说，元素的位置已经在原始 html 标记的父文档中指定，而不是由 JS 指定。
我试图在文档中插入一个按钮节点,但由于某些原因,它不会插入两个地方.
代码如下:
var elements = document.querySelectorAll('.Tabelle-Titel-nur-oben');
var buttonElement = document.createElement("Button");
var t0 = document.createTextNode("CLICK ME");
buttonElement.appendChild(t0);
for(var i = 0; i< elements.length; i++)
{
document.body.insertBefore(buttonElement, elements[i]);
}
在我的代码中,有两个匹配的元素querySelectorAll.但我的按钮只插入第二个元素.如果我使用两个不同的按钮实例,它可以工作 我想知道为什么按钮实例不会插入两个地方？