JavaScript Changing HTML

A ferry slip already on the page names the boat Gull, the time 09:10, and the note Boarding. Changing HTML means writing new content into an element you already hold. boat.textContent = "Heron" stores the plain words Heron. note.textContent = "<em>Late</em>" shows those characters, and note.querySelector("em") is null. note.innerHTML = "<em>Late</em>" builds an em whose text is Late. After that, note.textContent is Late, while note.innerHTML still contains the tags. A second write, note.innerHTML = "Dock 2", deletes the em. note.insertAdjacentHTML("beforeend", " <span>gate B</span>") keeps Dock 2 and adds gate B, so the note reads Dock 2 gate B. Nothing assigns the time, so it stays 09:10.

Writing, not another search

The previous page compared ways to find a node. This page does not count a collection, does not read an index, and does not walk parentElement. getElementById only hands you the slip. The lesson is the value you assign.

What each write leaves on the note

The note starts as Boarding. Read the rows in order. Each assignment replaces or extends that note.

textContent stores a string and does not parse tags. innerHTML parses tags and drops every child the element already had. insertAdjacentHTML parses tags as well, but beforeend places the new nodes after the current content. A boat name typed at the window belongs in textContent. The same string in innerHTML would treat a less-than sign as markup.

Read the slip before you write

The file opens with three values. No assignment has run.

The logs are Gull, 09:10, and Boarding. The time is its own paragraph. Later writes never touch when.

Plain words stay words

textContent replaces every child with one text node. Characters that look like a tag stay characters.

The first log is Heron. The second is the characters <em>Late</em>. The third is null. The note is showing a tag as text. It did not build an element.

innerHTML builds the element

Give those same characters to innerHTML. The parser turns the string into nodes and replaces whatever the note held.

The first log is Late. The second is <em>Late</em>, because innerHTML returns the markup, tags included. The third is false: the em is there, so it is not null. The visible words and the markup string are different readings of one element.

The next innerHTML clears the em

A new innerHTML value replaces the whole note. The em does not remain beside the new text.

The first log is Dock 2. The second is null. Boarding was already gone. The em goes away on this write.

Add gate B and keep Dock 2

insertAdjacentHTML("beforeend", ...) parses a fragment and puts it at the end. This string starts with a space, so the phrases stay two words. Other positions exist. This page uses beforeend only.

The first log is Dock 2 gate B. The second is gate B. Dock 2 is still in the note. Assigning that same span string with innerHTML would have deleted Dock 2.

One line under the slip

The script is at the end of the body, after the slip exists. It saves the word Late before Dock 2 replaces the em, then writes one line from the boat, that saved word, and the note after gate B is added.

The line reads Heron / Late / Dock 2 gate B. The time still reads 09:10. Late on the line is the word saved before the wipe. The note itself no longer says Late. The next page changes CSS on elements like these. It does not introduce another way to pick them.

Check the slip

1. Log the three starting texts and expect Gull, 09:10, and Boarding
2. Set the boat to Heron and the note to the em characters, then expect that character string and a null em
3. Set innerHTML to the em string, then expect textContent Late, innerHTML still carrying the tags, and an em that is not null
4. Set innerHTML to Dock 2 and expect the em to be null
5. Add the span with beforeend and expect Dock 2 gate B, then the span text gate B
6. Read the line and expect Heron / Late / Dock 2 gate B, and read the time and expect 09:10

Misses on this slip

The page still opens. The assignment wrote the wrong kind of value.

• Putting a name typed at the window into innerHTML, where a < becomes markup
• Expecting textContent = "<em>Late</em>" to create an em
• Reading textContent after the em write and expecting the tags in that string
• Assigning innerHTML again and expecting the em to remain
• Adding gate B with innerHTML and losing Dock 2
• Dropping the leading space, so the note reads Dock 2gate B
• Setting style here; the next page changes CSS
• Calling createElement here; a later page builds new nodes

Leave with this

• textContent writes plain text and does not parse tags
• innerHTML parses tags and replaces every child
• After the em write, textContent is Late and innerHTML still contains the tags
• A second innerHTML deletes the em
• insertAdjacentHTML("beforeend", ...) adds markup and keeps Dock 2
• The time stays 09:10 because nothing assigns it
• The line reads Heron / Late / Dock 2 gate B