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> 

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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

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

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

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

Как Sarfraz Ahmed mentioned in his answer, вы можете сделать второй пример работы, как вы хотите работать, написав:

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

document.getElementById('container').innerHTML = 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 = ...; 

и т.п.