如何从javascript覆盖html元素？

Question

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

原文由 Rella 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

替换其 内容

替换元素的 内容 很简单：

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

innerHTML 属性最近才被 标准化，但所有主流浏览器都支持（也可能是大多数次要浏览器）。 （请参阅下面关于 innerHTML 和替代品的注释。）

自己替换元素

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

 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 方法 而不是 innerHTML （与我在上面创建 div 和添加/删除时使用的方法相同）。请注意，在大多数浏览器中，通过做一堆 createElement ， appendChild 等来做任何大量的标记，调用而不是使用 innerHTML de28cfca4 慢点。将 HTML 解析为它们的内部结构并显示它是 _浏览器的基本工作_，因此它们针对此进行了高度优化。当您浏览 DOM 界面时，您将浏览一个构建在其内部结构之上的层，而无法获得其优化的优势。有时您必须那样做，但大多数情况下， innerHTML 是您的朋友。

原文由 T.J. Crowder 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

您真的需要“替换”元素还是可以切换其可见性？这是一种更简单且更有效的技术。最重要的是，它将内容 (html) 与行为 (javascript) 分开。

原文由 Shikhar Mehta 发布，翻译遵循 CC BY-SA 4.0 许可协议