如何从javascript覆盖html元素？

Question

我有一些带有HTML元素的HTML页面ID="logo".我需要创建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属性最近才被标准化,但得到所有主流浏览器的支持(可能也是最小的浏览器).(见下面的注释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将显着慢.将HTML解析为内部结构并显示它基本上是浏览器所做的事情,因此它们都是高度优化的.当您浏览DOM界面时,您将经历一个建立在其内部结构之上的层,而不是获得优化的优势.有时你必须这样做,但大多数情况下,innerHTML你的朋友.