Вставить элемент в заголовок

Question

Я пытаюсь использовать JavaScript для вставки новых элементов в свой HTML-файл.

Мой HTML файл выглядит следующим образом

<header> 
</header> 
<section> 
</section> 
<main> 
    <p id="time"></p> 
</main> 
<footer> 
</footer> 
<script src="first.js"> 
</script> 

Я вставляя элементы для теперь только в теге тела, используя

var h1 = document.createElement('h1'); 
var content = document.createTextNode('text'); 
h1.appendChild(content); 
document.body.appendChild(h1); 

Когда JavaScript вставляет элементы, она просто ставит их в в нижней части HTML-файла,

Я хочу знать, как вставлять элементы непосредственно в для моих тегов HEADER БЕЗ использования идентификаторов или других div.

<header></header> 

Как это

<header> 
    <h1>text</h1> 
</header> 
<section> 
</section> 
<main> 
    <p id="time"></p> 
</main> 
<footer> 
</footer> 
<script src="first.js"> 
</script> 

Спасибо !!!

Answer 1

Вы можете использовать document.getElementsByTagName('header')[0].appendChild(h1);

jsFiddle example

Вы также можете попробовать что-то вроде этого:

// Get all headers 
var headers = document.getElementsByTagName('header'); 

headers[0].appendChild(h1); // inserts into first header 
headers[1].appendChild(h1); // inserts into second header 
// And so on... 

Также вы можете цикл. Альтернативно querySelector - еще один вариант.