Strings that include <p></p> tags rendering as HTML content instead of string in DOM query

I have a series of strings and some of them are formatted like <p>Text here</p> and others are formatted like "Text here". The dilemma I have been having is that I want the string to render and actually include the p tags in the string <p>Text here</p>. However, this results in the text being wrapped in html paragraph tags.

<p>Text here</p>

<p>Text here</p>

Essentially, I assign the strings by using
document.getElementById("stringLocation").innerHtml = " <p>Text here</p>"

document.getElementById("stringLocation").innerHtml = " <p>Text here</p>"

How can I successfully use these DOM elements to assign to the dom and include the <p> tags as part of the string and not part of the html?

<p>

2 Answers
2

Assign to the .textContent property instead of the .innerHTML property, and string will be parsed as text rather than HTML (ensuring nothing but a text node gets created):

.textContent

.innerHTML

document.getElementById("stringLocation").textContent = " <p>Text here</p>"

<pre id="stringLocation"></pre>

HTML Character Codes are used for this:

<p>test</p>

<p>test</p>

<p>test</p>

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.