我想要做的是在 of 中創建一個帶有文本的div，它使用 id 而不是類，如何使用類來做到這一點，謝謝ADDED!div
javascript
<script>
function creatediv(){
const creatediv = document.createElement('div');
creatediv.innerHTML ="ADDED!";
document.getElementsByClassName("box1").appendChild(creatediv);
}
</script>
html
<div class="box1"></div>
<button class="creatediv" onclick="creatediv()">
<i class="fa-solid fa-plus fa-xl"></i>
</button>
uj5u.com熱心網友回復：
如果您正在尋找有關您的特定代碼片段為何不起作用的解釋：
getElementsByClassName回傳一個陣列。你需要用索引來參考它[0]
請參閱下面的作業片段：
function creatediv() {
const creatediv = document.createElement('div');
creatediv.innerHTML = "ADDED!";
document.getElementsByClassName("box1")[0].appendChild(creatediv);
}<div class="box1"></div>
<button class="creatediv" onclick="creatediv()">
Add<i class="fa-solid fa-plus fa-xl"></i>
</button>uj5u.com熱心網友回復：
document.getElementsByClassName回傳HTMLCollection
HtmlCollection 是元素的陣列
document.getElementById回傳元素
function creatediv() {
const creatediv = document.createElement('div');
creatediv.innerHTML = "ADDED!";
document.getElementById("box1").appendChild(creatediv);
}<div id="box1"></div>
<button class="creatediv" onclick="creatediv()">
<i class="fa-solid fa-plus fa-xl"></i>
</button>uj5u.com熱心網友回復：
這是因為您使用的是類而不是 ID，id 是唯一識別符號，因此每次通過其 id 獲取元素時，您總是參考頁面上的 One 元素。相反，如果您通過類名稱獲取元素，因為多元素可以具有該類，您始終必須處理一個 DOM 元素陣列
uj5u.com熱心網友回復：
它不起作用，因為 document.getElementsByClassName("box1") 回傳元素陣列，因為可以有多個具有相同類名的元素您可以通過這兩種方法中的任何一種來解決這個問題
從陣列中選擇特定元素
document.getElementsByClassName("box1")[0].appendChild(creatediv);
或使用 id 選擇器
document.getElementsById("box1").appendChild(creatediv);
我個人建議第二種方法，因為 id 是唯一的
uj5u.com熱心網友回復：
您使用 document.getElementsbyClassName() 。所以這個方法獲取所有盒子類名并回傳給你一個陣列。所以你有你應該使用 querySelector 方法，像這樣：
document.querySelector(".box").appendChild(yourElement);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/471172.html
標籤：javascript html css
上一篇：為什么網站導航崩潰這么快？
下一篇：用HTML列印表格