Как правильно создать текстовый узел и добавить в определенное место?

Question

Как правильно создать текстовый узел и добавить в определенное место?

0

Я пытаюсь просто добавить textNode в <h1> а затем добавить его в тело в <div id="prob3">, но я получаю эту ошибку TypeError: bdy.appendChild is not a function на bdy.appendChild(header); , Что не так с этим кодом?

Код JavaScript (встроенный в заголовок):

function init()
{
   var bdy = document.getElementsByTagName("body");
   var header = document.createElement("h1");
   var txt = document.createTextNode("Hello World!");
   header.appendChild(txt);
   bdy.appendChild(header);
}

HTML:

<body onload="init();">
     <div id="prob3">
         <!--Created TextNode goes Here-->
     </div>
</body>

TheAmazingKnight 13 апр. 2014, в 22:23

Источник

Теги:

javascript

html

function

dom

3 ответа

Ещё вопросы

jfriend00 · Answer 1 · 2014-04-13T18-47-00.000Z

Вы можете просто использовать:

document.body.appendChild(header);

Ваш код не работал, потому что:

var bdy = document.getElementsByTagName("body");

извлекает список элементов, а не один элемент. Вы могли бы использовать:

var bdy = document.getElementsByTagName("body")[0];

чтобы получить первый элемент из списка, но нет смысла делать это так, так как document.body уже предопределен для вас.

Спасибо за разъяснения. Можете ли вы также делать такие вещи, как, document.head , document.title ? Я играю с извлечением вещей вне <body> .
@TheAmazingKnight - document.title широко поддерживается. document.head поддерживается только в IE, начиная с IE9. Вы можете использовать MDN в качестве хорошего справочника для подобных вещей, поскольку он расскажет вам, что поддерживается в каких версиях браузера.
хорошо, я попытался динамически создать заголовок с помощью JS, похожий на тело, но не работает. var titler = document.createElement("title"); var titleTxt = document.createTextNode("Practical 340 Review JS"); titler.appendChild(titleTxt); document.title.appendChild(titler);
document.title.innerHTML = "Practical 340 Review JS"; тоже не работает.
document.title = "don't over-complicate shit" ... вам уже рассказывали о MDN, так что воспользуйтесь им: developer.mozilla.org/en-US/docs/Web/API/document.title
@TheAmazingKnight - да, у CBroe есть это прямо здесь. Это просто document.title = "Practical 340 Review JS"; ,

djechlin · Answer 2 · 2014-04-13T19-03-00.000Z

В этом методе вызывается:

 var bdy = document.getElementsByTagName("body");

Обратите внимание, что "элементы" являются множественными. Это означает, что, по всей вероятности, он возвращает массивную структуру (в данном случае NodeList). Массивы, естественно, не имеют метода .appendChild. Вы можете сказать об этом, bdy в отладчике или, более откровенно, с помощью console.log -ing.

CBroe · Answer 3 · 2014-04-13T19-00-00.000Z

getElementsByTagName получает вам NodeList, и вы не можете добавить к нему - сначала вы должны вывести первый элемент этого списка, getElementsByTagName("body")[0].appendChild.

Но каждый браузер понимает document.body как ярлык для элемента body.