如何使用document.getElementByID附加<br>？

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，浏览器仅 解析/插入添加了 < / em>）

请注意，您还可以先将元素保存在变量中，以避免重复自己的操作：

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>