Добавить элемент в DOM с помощью JavaScript - PullRequest
16 голосов
/ 13 марта 2010

Я хочу добавить элемент с JavaScript.

У меня есть следующий код:

var collection = document.getElementsByTagName('body');
var a = document.createElement('div');
a.innerHTML = 'some text';
collection.item(0).firstChild.appendChild(a);

и простой HTML:

<html>
    <head></head>
<body>

</body>
</html>

Где ошибка?

Ответы [ 2 ]

28 голосов
/ 13 марта 2010

Это должно сделать то, что вы ищете:

    var newdiv = document.createElement("div");
    newdiv.appendChild(document.createTextNode("some text"));
    document.body.appendChild(newdiv);
<html>
    <head></head>
<body>

</body>
</html>

Сначала вы создаете элемент с помощью document.createElement. Чтобы установить его текстовое содержимое, вы должны иметь «текстовый узел», обертывающий ваш текст. Итак, вы сначала создаете такой текстовый узел, а затем добавляете его как (единственный) дочерний элемент к вашему новому объекту.

Затем добавьте вновь созданный элемент DIV в структуру DOM. Вам не нужно искать элемент BODY с getElementsByTagName(), поскольку он существует как свойство объекта document.

6 голосов
/ 14 марта 2010

Ваш код терпит неудачу, потому что в то время, когда вы пытаетесь вставить этот новый div, тег body пуст, и, следовательно, нет firstChild, к которому можно что-либо добавить Измените свою последнюю строку на:

collection.item(0).appendChild(a);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...