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

Question

I'm trying to append a <p> element using DOM to append a stock symbol, and stock price, then go to a new line using <br> , but when I run this:

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>");
}

it literally adds the text <br> to my "stockprice" element. What is the proper way to do this?

Answer 1

Use insertAdjacentHTML instead:

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

I'd recommend against concatenating with the existing innerHTML because that will

(1) corrupt existing listeners inside the container, if any, and

(2) force the browser to re-parse the entire contents of the container (in contrast, with insertAdjacentHTML , the browser only parses/inserts what gets added )

Note that you can also save the element in a variable first to avoid repeating yourself:

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>");
}

Or, even better:

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

Answer 2

You should go for 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>