如何讓我的新子彈點顯示一個字符串？

Question

第一次發帖，對不起，如果我做錯了什么。

當我嘗試用js創建一個新列表時，列表元素只在DOM中顯示[object HTMLLIElement]。 每當我按下按鈕時，我希望它創建一個新的子彈點，上面寫着“你好”。 它只顯示這個https://gyazo.com/f441c11ce81d80ff14ba4e207c1a7e2d

這是我的代碼。

 var bodyEl = document.querySelector("body"); var ulist = document.createElement("ul"); var bulletpointEl = document.createElement("li"); bulletpointEl.innerHTML = "hello" bodyEl.appendChild(ulist); function bulletpoint() { ulist.innerHTML += bulletpointEl; } 

 <button onclick="bulletpoint()">New bulletpoint</button> 

Answer 1

你必須使用appendChild而不是innerHTML 。 要在每個按鈕單擊中創建新的li元素，您必須在函數內創建它。

當內容是簡單文本時，我還建議您使用textContent而不是innerHTML 。

 var bodyEl = document.querySelector("body"); var ulist = document.createElement("ul"); function bulletpoint(){ var bulletpointEl = document.createElement("li"); bulletpointEl.textContent = "hello" ulist.appendChild(bulletpointEl); bodyEl.appendChild(ulist); } 

 <button onclick="bulletpoint()">New bulletpoint</button> <a href="../index.html">back</a> 

Answer 2

問題是你試圖給innerHTML一個對象而不是一個字符串。 innerHTML接受一個字符串 - https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#Syntax

如果你想將一個html元素附加到ulist，你需要使用與bodyEl相同的.appendChild（）方法 -

function bulletpoint(){
  ulist.appendChild(bulletpointEl);
}

希望這可以幫助！