Adding HTML tags in a javascript variable

Question

(Closed). This question needs details or clarity. It is not currently accepting answers. question from:https://stackoverflow.com/questions/66056785/adding-html-tags-in-a-javascript-variable

Answer 1

As noted - you have the plus in the code and the browser is rendering it as a string amnd the rest of the h1 is then a string as well - not a html element of <h1>. If I understand your needs - you are trying to make a string and then have that rendered.

That way you can create the elements dynamically, add icons and other html elements and then add it into the DOM using innerHTML().

let headingStr = '';

headingStr += '<h1>';
  headingStr += '<span class="icon">~</span>';
  headingStr += 'This is a heading';
  headingStr += '<span class="icon">*</span>';
headingStr += '</h1>';

document.querySelector('#container').innerHTML = headingStr;

#container {
  padding: 8px 16px;
  border: solid 1px blue;
}
h1 {
  font-size: 18px;
  color: green;
  margin: 0;
 }
 
.icon {
   color: red;
}

<div id="container"></div>