appendChild + createElement

Question

Какая разница между:

var div = document.createElement('div');//output -> [object HTMLDivElement]

document.getElementById('container').appendChild(div);

и

var div = '<div></div>';

document.getElementById('container').appendChild(div);//output -> <div></div>

Разве они не должны быть одинаковыми? И если нет, как заставить работать вторую версию?

Answer 1

Последний - просто строка, содержащая HTML, а первый - объект. Для первого вам нужно appendChild, а для второго вам нужно добавить innerHTML.

не должны ли оба быть одинаковыми? и если нет, как мне получить 2-ю версию работа

var div = '<div></div>';
document.getElementById('container').innerHTML += div;

Answer 2

С вашим механизмом JS / DOM вызов Element.appendChild с string в качестве аргумента приводит к созданию и добавлению нового узла Text.

Ваш первый пример создает элемент <div>,Ваш второй пример создает текстовый узел с <div></div> в качестве его содержимого.

Ваш второй пример эквивалентен:

var div = '<div></div>';

document.getElementById('container').appendChild(document.createTextNode(div));//output -> <div></div>

As Сарфраз Ахмед, упомянутый в его ответе Вы можете заставить второй пример работать так, как вы хотите, чтобы он работал, написав:

var div = '<div></div>';

document.getElementById('container').innerHTML = div;

Answer 3

appendChild действительно ожидает некоторый HTMLDomNode, такой как HTMLDivElement, а не строку. Он не знает, как обращаться со строкой. Вы могли бы сделать

document.getElementById('container').innerHTML += div;

но я действительно предпочитаю первую версию; и я бы больше полагался на это, чтобы вести себя одинаково во всех браузерах.

Answer 4

appendChild ожидает элемент, поэтому, когда вы отправляете ему текст, он не знает, что делать. Возможно, вы захотите изучить использование библиотеки javascript для упрощения некоторых из этих задач, таких как jQuery. Ваш код будет:

$('#container').append('<div></div>');

Answer 5

Самое простое решение и поддержка всех браузеров:

var div = '<div></div>';
var parser = new DOMParser();
var myDiv = parser.parseFromString( html, "text/xml" );

Другое решение может быть:

var div = '<div></div>';
var tmpDiv = document.createElement('div');
    tmpDiv.innerHTML = div;

    elDiv = tmpDiv.childNodes[0]; //Now it can be used as an element

Answer 6

Вы также можете использовать их для добавления / добавления элемента в DOM соответственно:

var elem = document.documentElement.appendChild(document.createElement(element));
var elem = document.documentElement.prepend(document.createElement(element));

и используйте переменную elem, чтобы указать элемент (например,):

elem.style.display = "block";
elem.style.remove();
elem.style.id = ...;

и т.д.