選擇在JS中使用JS創建的html元素

我需要使用JavaScript創建h1元素，然後將內容添加到該h1。這是我的嘗試：選擇在JS中使用JS創建的html元素

<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!";

來源

2016-02-11 Shniper

你不能使用document.getElementById()來獲取一個元素，除非它已經被添加到了DOM中，而它並沒有在你的任何例子中。這就是說，你不需要添加元素到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!";

來源

2016-02-11 20:27:15 jered

所以我非常複雜。謝謝 – Shniper

你可能希望先測試一下：'createElement'是'document'的一種方法，而不是HTML元素節點。 – traktor53

好點，我只是複製他的代碼，並添加了一些沒有太緊密地檢查它。 – jered

在這裏，我創建元素，然後設置文本。

從那裏你可以追加新元素到你的'時間'div。

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

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

來源

2016-02-11 20:23:51 IrkenInvader

如果您想替換#time的現有內容，您可以[先將其innerHTML設置爲「」（空字符串）]（http：// stackoverflow。-的-A-HTML元素替換，所有的孩子）的COM /問題/ 4991098 /。 – traktor53

使用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

來源

2016-02-11 20:25:16

您必須先將它添加到DOM，然後才能使用getElementById來查找它。

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

來源

2016-02-11 20:26:41 Failwyn

您需要首先創建自己的元素：

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

然後，在創建h1元素後，可以將其添加到您的div：

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

來源

2016-02-11 20:27:07 jeerbl

您可以創建和使用的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的內容工作以替換現有內容（如果沒有，則不需要重置）。

來源

2016-02-11 20:59:32 traktor53

選擇在JS中使用JS創建的html元素

回答

相關問題