javascript - 将元素插入标题

Question

我正在尝试使用 JavaScript 在我的 HTML 文件中插入新元素。

我的 HTML 文件看起来像这样

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

我现在一直在 body 标签中插入元素，方法是使用

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

当 JavaScript 插入元素时，它只是将它们放在 HTML 文件的底部，

<footer>
</footer>
<script src="first.js">
</script>
<h1>text</h1>

我想知道如何在不使用 id 或其他 div 的情况下将元素直接插入到我的 HEADER 标记中。

<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是另一种选择。