I completed phase one at Flatiron School! This was definitely a challenge but I'm so proud I completed it. These past 3 weeks went by so quickly and I can for sure say I learned a lot. I enjoyed getting to know my cohort and learning along with them.
During phase one we learned about the basics of JavaScript. After spending 2 weeks learning about the DOM, event listeners and fetch requests, the class was able to use their skills to make a functioning website. For my website, my partner and I created a movie review website where people can read descriptions of top rated and new releases movies. A part of my project required me to fetch the json file and display the information from it on the dom. To do that I had to use either innerText, innerHTML or innerTEXT. While I could’ve used either 3 of those to complete my task, I was still confused about which one to use. So here’s a breakdown of the three make your life easier!
This will be out sample code.
We used a div element and set the id to exampleCode. We have a bold and code tag. The bold tag will make the content inside it bold and the code tag will display the content inside it as monospace font.
<div id=‘exampleCode>
This world is <bold>bold</bold>. There is a space <code>here</code>
</div>
To get the text to display we can declare an element to it and then call it using innerHTML, innerText and textContent.
const exampleCode = document.getElementById('blog-test');
exampleCode.innerHTML
exampleCode.innerText
exampleCode.textContent
When we call the code using .innerHTML, it will return this.
"This world is <bold>bold</bold>. There is a space <code>here</code>"
.innerHTML will return the html markup within the code as we can see with and . Use this when you want to see the html content of a code.
When we call the code using .textContent, it will return this.
"This world is bold. There is a space here"
.textContent will return this code with the html markups applied to it. We can see the extra spacing added between “space” and “here” have been applied. Use this when you want to see the value of an element with the formatting applied.
When we call the code using .innerText, it will return this.
"This world is bold. There is a space here"
.innerText will return the code with the html markups applied to it but the extra spacing in the code will be ignored. Use this when you want to see the value of an element but with the formatting ignored.
Reference list
https://betterprogramming.pub/whats-best-innertext-vs-innerhtml-vs-textcontent-903ebc43a3fc
https://www.w3schools.com/
Top comments (0)