Как переписать HTML-элемент из JavaScript?

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 и альтернативах.)

Замена элемента 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 методы вместо 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";
}

см. ответ TJ , если вы действительно хотите заменить элемент.