JS: Change Element's Content
There are 3 ways to change a element's content.
- Treat it as a innerHTML, and use property
innerHTML
. This is for HTML (not XML), works in all browsers. - Treat it as a text content, and use property
textContent
. This works well if the content is text and contains no HTML. (if you set value to"<b>bold text</b>"
, the text won't be bold.) - Treat it as a DOM tree node, and use property
nodeValue
. This is the most general, and works with XML too.
[see DOM: textContent, innerHTML, innerText, nodeValue]
Example
Press the following buttons to change the paragraph.
How are you?
Here is the HTML code.
<p id="showBox87134">How are you?</p> <button id="btn1" type="button">Answer</button> <button id="btn2" type="button">Question</button>
Here is the JavaScript code.
const showBox87134 = document.getElementById("showBox87134"); const btn1 = document.getElementById ('btn1'); const btn2 = document.getElementById ('btn2'); const f1 = (() => {showBox87134 .innerHTML="Fine, thank you.";}); const f2 = (() => {showBox87134 .innerHTML="How are you?";}); btn1. addEventListener ("click", f1, false); btn2. addEventListener ("click", f2, false);
Note: if you just want to insert text that's not HTML, best to use
node.textContent = string