javascript - 如何使用 document.getElementByID 附加 ？

Question

我正在尝试附加 <p>使用 DOM 元素附加股票代码和股票价格，然后使用 <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>");
}