我怎樣才能附加一個<br>使用 document.getElementByID？

Question

我正在嘗試使用 DOM 附加一個<p>元素來附加一個股票代碼和股票價格，然后使用<br>轉到一個新行，但是當我運行這個時：

for(var i=0; i<stockPrices.length; i++){
    document.getElementById("stockprice").append(stockNames[i]+" ");
    document.getElementById("stockprice").append(stockPrices[i]+" ");
    document.getElementById("stockprice").append("<br>");
}

它實際上將文本<br>添加到我的“股票價格”元素中。 這樣做的正確方法是什么？

Answer 1

使用insertAdjacentHTML代替：

 document.body.append('content'); document.body.insertAdjacentHTML('beforeend', '<br>'); document.body.append('more content');

我建議不要與現有的innerHTML連接，因為那樣會

(1) 破壞容器內現有的偵聽器（如果有），以及

(2) 強制瀏覽器重新解析容器的全部內容（相比之下，使用insertAdjacentHTML ，瀏覽器只解析/插入添加的內容）

請注意，您也可以先將元素保存在變量中以避免重復：

const stockPriceElm = document.getElementById("stockprice");
for(var i=0; i<stockPrices.length; i++){
  stockPriceElm.append(stockNames[i]+" ");
  stockPriceElm.append(stockPrices[i]+" ");
  stockPriceElm.insertAdjacentHTML('beforeend', "<br>");
}

或者，甚至更好：

const stockPriceElm = document.getElementById("stockprice");
for (var i = 0; i < stockPrices.length; i++) {
  stockPriceElm.insertAdjacentHTML('beforeend', stockNames[i] + " " + stockPrices[i] + " <br>");
}

Answer 2

你應該選擇innerHTML

 function appendContent() { document.getElementById("stockprice").innerHTML += "<br>"; document.getElementById("stockprice").innerHTML += "New Data"; }

 <p id="stockprice">Initial Content</p> <button onclick="appendContent()">Append</button>