如何从javascript覆盖html元素? [英] How to overwrite html element from javascript?

问题描述

我有一个HTML页面，其中包含一些带有 ID ="logo" 的HTML元素.我需要创建JS脚本(无外部libs调用)，该脚本将用其他HTML元素(例如</div>" 中的其他HTML元素)覆盖该html元素.

I have HTML page with some HTML element with ID="logo". I need to create JS script (with no external libs calls) that will overwrite that html element with other HTML element like "<div id=logo> stuff inside </div>".

推荐答案

在大多数情况下，它只是您要替换的内容，而不是元素本身.如果您实际上替换了元素，则会发现不再附加到该元素的事件处理程序(因为它们已附加到旧的事件处理程序上).

Most of the time, it's just the content you want to replace, not the element itself. If you actually replace the element, you'll find that event handlers attached to it are no longer attached (because they were attached to the old one).

替换元素的内容很容易:

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

innerHTML 属性直到最近才被标准化，但所有主要浏览器(可能也是大多数次要浏览器)都支持.(请参阅下面有关 innerHTML 及其替代方法的注释.)

The innerHTML property has only recently been standardized, but is supported by all major browsers (probably most minor ones, too). (See notes below about innerHTML and alternatives.)

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

Actually replacing the element itself is a little harder, but not much:

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 之类的库，请使用

Notes on innerHTML and other DOM manipulation techiques

There are a number of wrinkles around using innerHTML in certain browsers, mostly around tables and forms. If you can possibly use a library like jQuery, Prototype, etc., I'd do so, as they've got workarounds for those issues built-in.

或者，您可以使用其他各种DOM方法，而不是 innerHTML (与我上面用于创建div和添加/删除的方法相同).请注意，在大多数浏览器中，通过执行一堆 createElement ， appendChild 等来进行大量标记，而不是使用 innerHTML 戏剧性地变慢.从根本上来说，将HTML解析为内部结构并将其显示为浏览器的操作，因此它们经过了高度优化，可以做到这一点.当您通过DOM接口时，您正在经历的是基于其内部结构构建的一层，而没有利用其优化的优势.有时候，您必须那样做，但是在大多数情况下， innerHTML 是您的朋友.

Alternatively, you can use the various other DOM methods rather than innerHTML (the same ones I used for creating the div and adding/removing, above). Note that in most browsers, doing any significant amount of markup by doing a bunch of createElement, appendChild, etc., calls rather than using innerHTML will be dramatically slower. Parsing HTML into their internal structures and displaying it is fundamentally what browsers do, and so they're highly optimized to do that. When you go through the DOM interface, you're going through a layer built on top of their internal structures and not getting the advantage of their optimizations. Sometimes you have to do it that way, but mostly, innerHTML is your friend.

这篇关于如何从javascript覆盖html元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！