Возвращаемый элемент, измененный externalHTML

Я создаю общий элемент

var element = document.createElement(null);
document.body.appendChild(element);

после чего элемент изменяется с помощью externalHTML

element.outerHTML = "<div> hello there </div>";

элемент отображается правильно. Однако сама переменная "элемент" никак не отражает изменения. Кажется, что единственный способ извлечь этот элемент - сделать что-то вроде...

element.outerHTML = "<div id='hi'> hello there </div>";
element = document.getElementById("hi");

Выглядит некрасиво Есть ли лучший способ и / или я что-то упустил?

1 ответ

Решение

Рассмотрим фрагмент ниже:

var element = document.createElement(null);
console.log(element);
document.body.appendChild(element);
console.log(element);
element.outerHTML = "<div id='hi'> hello there </div>";
console.log(element);
element = document.getElementById("hi");
console.log(element);

Вы заметите, что ссылка на оригинальный элемент, после outerHTML используется. Это как указано в документации:

Кроме того, хотя элемент будет заменен в документе, переменная, свойство которой externalHTML было установлено, будет по-прежнему содержать ссылку на исходный элемент.

Таким образом, самый простой способ - это использовать document.getElementById() после установки сказал id чтобы получить новый элемент, который был создан или использует document.createElement() как это, чтобы создать менее общий объект и манипулировать его innerHTML():

var element = document.createElement('div');
console.log(element);
element.innerHTML = ' hello there ';
document.body.appendChild(element);
console.log(element);

Как вы можете видеть, в приведенном фрагменте, element то же самое после изменения его содержания.

Обновить:

Используя некоторые творческие трюки, вы можете добавить то, что хотите, используя innerHTML на общий элемент, который вы создаете, затем возьмите его firstChild и заменить element, затем, наконец, добавьте его в свой документ и оставьте его выбранным. Пример ниже показывает вам, как это сделать:

var element = document.createElement(null);
element.innerHTML = '<div> hello there </div>';
element = element.firstChild;
document.body.appendChild(element);
console.log(element);

Другие вопросы по тегам