Search code examples
javascripthtmlinnerhtml

Seperate tag using multiple innerHTML in Javascript

Expected result is the second line should be bold:

it's regular
it's bold

I have this code and I want to separate the tag. The html output is : the "it's bold" is outside the . Is it possible to separate the html tag using multiple innerHTML?

var content = document.getElementById("content");
content.innerHTML += "it's regular";
content.innerHTML += "<br><b>";
content.innerHTML += "it's bold";
content.innerHTML += "</b>";

<div id="content"></div>
Solution

  • Because you are writing straight to the innerHTML of the element, your browser is working overtime between the four lines (where you change the innerHTML) to make sure the HTML makes sense. In the second line, you add an un-closed <b>-tag, so the browser does whatever it can to make sure it makes sense after this change: It closes the tag. Now, when you later add text, and then add a closing tag - it doesn't make sense to close an already closed tag.

    I recommend you use an intermediary variable here, it will allow you to do almost the exact same thing as before. Example below.

    var content = document.getElementById("content");
let newHtml = ''
newHtml += "it's regular";
newHtml += "<br><b>";
newHtml += "it's bold";
newHtml += "</b>";
content.innerHTML = newHtml
    <div id="content"></div>