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>
Разве оба не должны быть тем же? И в противном случае как я заставляю вторую версию работать?
4 ответа
Последний - это просто строка, содержащая HTML, а первая - объект. Для первого вам понадобится appendChild , а для второго вам нужно добавить к innerHTML .
не должны ли оба быть одинаковыми? и если нет, как мне получить вторую версию работать?
var div = '<div></div>';
document.getElementById('container').innerHTML += div;
appendChild ожидает элемент, поэтому, когда вы отправляете ему текст, он не знает, что делать. Возможно, вы захотите изучить использование библиотеки javascript, чтобы облегчить эту работу, например jQuery. Ваш код будет выглядеть так:
$('#container').append('<div></div>');
appendChild действительно ожидает HTMLDomNode какого-то типа, например HTMLDivElement, а не строку. Он не знает, как работать со строкой. Вы можете сделать
document.getElementById('container').innerHTML += div;
но я действительно предпочитаю первую версию; и я бы больше полагался на то, что она будет вести себя одинаково во всех браузерах.
В вашем JS/DOM движке вызов Element.appendChild с строкой в качестве аргумента приводит к созданию нового Text узла, который затем добавляется.
Ваш первый пример создает элемент Ваш второй пример эквивалентен: Как Sarfraz Ahmed упомянул в своем ответе, вы можете заставить второй пример работать так, как вы хотите, написав: в качестве его содержимого.
var div = '<div></div>';
document.getElementById('container').appendChild(document.createTextNode(div));//output -> <div></div>
var div = '<div></div>';
document.getElementById('container').innerHTML = div;