Question

我需要使用JavaScript创建h1元素，然后向h1添加内容。这就是我试过的：

<div id="time">
</div>
<script>
  var h1 = document.getElementById("time").createElement("h1");
  h1.id= "timeh1";
  document.getElementById("timeh1").innerHTML = "Good Afternoon!";
</script>

和

<div id="time>
</div>
<script>
  document.getElementById("time").createElement("h1");
  document.getElementByTagName("h1")[0].setAttribute("id", "time-h1");
  document.getElementById("time-h1").innerHTML = "Good Afternoon!";
</script>

和

document.getElementById("time").createElement("h1").innerHTML = "Good Afternoon!";

Answer 1

除非将元素添加到DOM中，否则不能使用document.getElementById()来获取元素，而在任何示例中都没有。话虽如此，您不需要将元素添加到DOM来更改其innerHTML，因为您已经通过创建它在JS中引用了它。

要么这样做：

var h1 = document.createElement("h1");
h1.id= "timeh1";
h1.innerHTML = "Good Afternoon!";

或者这个：

var h1 = document.createElement("h1");
h1.id= "timeh1";
document.getElementById("time").appendChild(h1);
document.getElementById("timeh1").innerHTML = "Good Afternoon!";

Answer 2

这里我创建元素，然后设置文本。

从那里你可以将新元素追加到你的'time'div。

var h1 = document.createElement('h1');
h1.innerHtml = "Good Afternoon!";

document.getElementById('time').appendChild(h1);

Answer 3

使用appendChild方法将创建的h1添加到文档中的特定元素。例如body就像这样：

var h1 = document.createElement("h1");
h1.id= "timeh1";
h1.textContent="Good afternoon";
document.body.appendChild(h1);//append dynamically created h1 at the end of the body

额外提示：对于这种情况.textContent更好，而不是innerHTML。因为添加内容只是文本。以下是使用此属性的一个很好的参考：textContent

Answer 4

您必须先将其添加到DOM中，然后才能使用getElementById来查找它。

var b = document.createElement('button');
document.body.appendChild(b);

Answer 5

您需要先创建元素：

var h1 = document.createElement("h1");
h1.innerHTML = "Good Afternoon!";

然后，在创建h1元素后，您可以将其附加到div：

document.getElementById("time").appendChild(h1);

Answer 6

您可以使用innerHTML标记创建和添加标题：

document.getElmentById("time").innerHTML = "<h1>Good Afternoon!</h1>";

或者使用document.createElement创建标题节点，使用innerHTML（例如）插入其内容并将其插入DOM。

var h1 = document.createElement("h1");
h1.innerHTML =  "Godd Afternoon!";
var container = document.getElementById("time");
container.innerHTML = "";  // reset contents of #time div to nothing
container.appendChild(h1);

重置div的内容以替换现有内容（如果没有，则不需要重置）。

选择在JS中用JS创建的html元素

6 个答案: