innerHTML v. innerText

If you've ever found yourself unsure whether to use .innerHTML or .innerText, you're not alone! Distinguishing between the two is something that many beginning developers struggle with when attempting to manipulate the DOM. Read on to learn about the differences between the two properties and why seasoned developers approach innerHTML with caution.

.innerHTML

InnerHTML is a JavaScript property that allows developers to dynamically manipulate an element's HTML information within the DOM. This property can be used to set an element's inner text, but it can also be used to set attributes and provide formatting instructions. Let's look at the example below.

const div = document.createElement("div")
div.innerHTML = "<p id="p1" class="paragraph">innerHTML is a powerful tool!</p>"

Here, we are using document.createElement to create a <div> element. We then use innerHTML to tell JavaScript to create a <p> element with the id "p1" within our <div>. We are also using innerHTML to set the text content of our newly-created <p> element.

When our page loads, the innerHTML property will allow JavaScript to recognize everything that we would like to include in our <div>. JavaScript will render innerHTML is a powerful tool! as "innerHTML is a powerful tool!"

.innerText

InnerText is a JavaScript property that enables developers to dynamically manipulate an element's inner text information within the DOM. This property can be used to set an element's inner text content, but it cannot be used to set attributes or provide formatting instructions. Let's revisit our example above using innerText.

const div = document.createElement("div")
const p = document.createElement("p")
div.append(p)
p.id = "p1"
p.className = "paragraph"
p.innerText = "innerHTML is a powerful tool!"

Here, we are using document.createElement to create both a <div> element and a <p> element. We then use div.append to append our <p> element to our <div> element and p.id to set the id of our <p> element. Finally, we are using innerText to set the text content of our <p> element.

When our page loads, innerHTML is a powerful tool! will be rendered as "innerHTML is a powerful tool!".

Comparison

You may notice that our innerText example accomplished the same goal as our innerHTML example but required a few more steps to do so. Let's explore why this is the case.

In our innerHTML example, we used innerHTML to create a <p> element, set its class and id, append it to our <div>, and set our <p>'s text content. Because we used innerHTML to create our <p> directly within our <div>, we did not need to use div.append as we did in our innerText example.

Similarly, we used innerHTML to set the class name and id of our <p> value by placing these attributes directly inside our <p> tag as they would appear in an HTML file. Because of this, we did not need to use p.id or p.className as we did in our innerText example.

Takeaways

We have seen how innerText and innerHTML can be used to manipulate the DOM. We have also seen the limitations of the innerText property and explored why this property requires extra steps when compared the innerHTML property. Now, let's discuss why developers do not always opt for the use of innerHTML.

As we have learned, innerHTML has the unique ability to create elements and set attributes. Unfortunately, it can just as easily remove them, whether you want it to or not! Remember, innerText only modifies the text content of an element, but innerHTML modifies an element's inner text, child nodes, and attributes. Because of this, it is important to exercise caution when using innerHTML and to opt for innerText when you are unsure where your data is coming from.