appendChild + createElement

в чем разница между:

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>

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

15
appendchild html javascript

6 ответов

более поздний-чистый html для элемента, а первый-объект. Для первого, Вам нужно appendChild в то время как для более позднего, вам нужно innerHTML.

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

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

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

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

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

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

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

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

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

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

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

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

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

4

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

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

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

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
1

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

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

и с помощью elem переменная для целевого элемента (e.g):

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

etc.

0