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

将元素插入标题

1 个答案: