JS DOM: Change Element Content

How to 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.

Example

Press the following buttons to change the paragraph.

How are you?

Code

<p id="root865">How are you?</p>
<button id="btn1" type="button">Answer</button>
<button id="btn2" type="button">Question</button>

const root865 = document.getElementById("root865");
const btn1 = document.getElementById("btn1");
const btn2 = document.getElementById("btn2");

const f1 = () => {
  root865.innerHTML = "Fine, thank you.";
};
const f2 = () => {
  root865.innerHTML = "How are you?";
};

btn1.addEventListener("click", f1, false);
btn2.addEventListener("click", f2, false);