如何从javascript覆盖html元素？

Question

我的HTML页面包含一些带有ID="logo"的HTML元素。我需要创建JS脚本（没有外部libs调用），它将用其他HTML元素覆盖该html元素，如"<div id=logo> stuff inside </div>"。

Answer 1

大多数情况下，它只是您要替换的内容，而不是元素本身。如果你实际上替换了元素，你会发现附加到它的事件处理程序不再被附加（因为它们被附加到旧元素上）。

替换内容

更换元素的内容非常简单：

var element;
element = document.getElementById("logo");
if (element) {
    element.innerHTML = "-new content-";
}

innerHTML属性最近只有standardized，但所有主流浏览器都支持（可能也是最小的浏览器）。 （请参阅下面有关innerHTML和替代方案的说明。）

替换元素iself

实际上替换元素本身有点困难，但并不多：

var element, newElement, parent;

// Get the original element
element = document.getElementById("logo");

// Assuming it exists...
if (element) {
    // Get its parent
    parent = element.parentNode;

    // Create the new element
    newElement = document.createElement('div');

    // Set its ID and content
    newElement.id = "logo";
    newElement.innerHTML = "-new content here-";

    // Insert the new one in front of the old one (this temporarily
    // creates an invalid DOM tree [two elements with the same ID],
    // but that's harmless because we're about to fix that).
    parent.insertBefore(newElement, element);

    // Remove the original
    parent.removeChild(element);
}

关于innerHTML和其他DOM操作技术的说明

在某些浏览器中使用innerHTML时会出现许多皱纹，主要是围绕表格和表单。如果您可以使用jQuery，Prototype等库，我会这样做，因为他们已经解决了内置问题的解决方法。

或者，您可以使用各种其他DOM methods而不是innerHTML（与我在上面创建div和添加/删除时使用的相同）。请注意，在大多数浏览器中，通过执行大量createElement，appendChild等来执行大量标记操作，而不是使用innerHTML将显着地慢一点。将HTML解析为内部结构并显示它基本上是浏览器所做的，因此它们经过高度优化才能实现。当您浏览DOM界面时，您将经历一个建立在其内部结构之上的层，而不是获得优化的优势。有时你必须这样做，但大多数情况下，innerHTML是你的朋友。

Answer 2

你真的需要'替换'元素，还是只能切换它的可见性？这种技术更简单，效率更高。 最重要的是它将内容（html）与行为（javascript）分开。

function toggle() {
    document.getElementById("logo").style.display="none";
    document.getElementById("element_to_show").style.display="block";
}

如果您确实想要替换该元素，请参阅T.J.'s answer。