JS DOM - 01.03 - Text and Html Content

Adding text content and HTML content

div.textContent = "Hello World!";
// creates a text node containing "hello world" and inserts it in div

div.innerHTML = "<span>Hello World!</span>";
// renders the HTML inside div

It is preferred to using text content over inner html for adding text to avoid security risks.

innerHTML

The innerHTML property allows to get the HTML inside the element as a string.
We can also modify it. So it’s one of the most powerful ways to change the page.

<script>
	alert( documnet.body.innerHTML ); // read current content
	document.body.innerHTML = 'The new body';  // replace it
</script>

We can append HTML to an element by using elem.innerHTML += "more html"
what’s going on is not an addition, but a full overwrite.
In other words, innerHTML+= does this:

1. The old contents is removed.
2. The new innerHTML is written instead (a concatenation of the old and the new one).

As the content is “zeroed-out” and rewritten from the scratch, all images and other resources will be reloaded.

outerHTML

The outerHTML property contains the full HTML of the element. That’s like innerHTML plus the element itself.

<script>
	alert( elem.outerHTML ); // <div id='elem'> Hello </div>
</script>

writing to outerHTML does not change the element. Instead, it replaces it in the DOM.

The outerHTML assignment does not modify the DOM element , but removes it from the DOM and inserts the new HTML in its place.
So what happened in div.outerHTML=... is:

• div was removed from the document.
• Another piece of HTML <p>A new element</p> was inserted in its place.
• div still has its old value. The new HTML wasn’t saved to any variable.

It’s so easy to make an error here: modify div.outerHTML and then continue to work with div as if it had the new content in it. But it doesn’t. Such thing is correct for innerHTML, but not for outerHTML.

textContent

The textContent provides access to the text inside the element: only text, minus all <tags>

Writing to textContent is much more useful, because it allows to write text the “safe way”.

An arbitrary string, for instance entered by a user, and want to show it.

• With innerHTML we’ll have it inserted “as HTML”, with all HTML tags.
• With textContent we’ll have it inserted “as text”, all symbols are treated literally.

<div id = "elem1" ></div>
<div id = "elem2" ></div>

<script>
	let name = prompt("What's your name?", "<b>Winnie-the-Pooh!</b>");

	elem1.innerHTML = name;
	emel2.textContent = name;
</script>

1. The first <div> gets the name “as HTML”: all tags become tags, so we see the bold name.
2. The second <div> gets the name “as text”, so we literally see <b>Winnie-the-Pooh!</b>.

In most cases, we expect the text from a user, and want to treat it as text. We don’t want unexpected HTML in our site. An assignment to textContent does exactly that.

The hidden property

The “hidden” attribute and the DOM property specifies whether the element is visible or not.

<div> Both divs below are hidden </div>

<div hidden>wit the attribute "hidden"</div>

<div id="elem">Javascript assigned property hidden</div>

<script>
	elem.hidden = true;
</script>

hidden works the same as style="display:none". But it’s shorter to write.

Here’s a blinking element:

<div id="elem">A blinking element</div>

<script>
	setInterval( () => elem.hidden = !elem.hidden, 1000);
</script>

More properties

DOM elements also have additional properties, in particular those that depend on the class:

• value – the value for <input>, <select> and <textarea> (HTMLInputElement, HTMLSelectElement…).
• href – the “href” for <a href="..."> (HTMLAnchorElement).
• id – the value of “id” attribute, for all elements (HTMLElement).

<input type="text" id="elem" value="value">

<script>
	alert( elem.type);   // text
	alert( elem.id);  // elem
	alert( elem.value);  // value
</script>