Revision:
The innerHTML property sets or returns the HTML content (inner HTML) of an element. The property can be used to write dynamic html on the html document. It is used mostly in web pages to generate dynamic html, such as registration form, comment form, links etc.
Every HTML element has an inner HTML property that is used to define HTML tags and also the content that is inserted between them. This property is one of the components of the DOM that lets developers manipulate the appearances of web pages. In other words, it allows to get information about all DOM elements. Additionally, it creates the opportunity to modify or replace HTML elements.
return the innerHTML property : HTMLElementObject.innerHTML
set the innerHTML property : HTMLElementObject.innerHTML = text
The innerHTML JavaScript property can only take one value. It is called text. Text specifies the HTML content inside an element. As a parameter, it is used to make modifications to the text of the element. After applying it, you will be able to change texts that are positioned between different HTML tags.
<script>
function myFunction() {
var x = document.getElementById("myP").innerHTML;
document.getElementById("demo").innerHTML = x;
}
</script>
<script>
function myFunction() {
var x = document.getElementById("myList").innerHTML;
document.getElementById("demo").innerHTML = x;
}
</script>
Example: change the HTML content of two elements
<script>
document.getElementById("myP").innerHTML = "Hello Dolly.";
document.getElementById("myDIV").innerHTML = "How are you?";
</script>
Example: change the HTML content, URL, and target of a link
<script>
function myFunction() {
document.getElementById("myAnchor").innerHTML = "my website";
document.getElementById("myAnchor").href = "https://www.lwitters.com";
document.getElementById("myAnchor").target = "_blank";
}
</script>
show messages
<div class="spec">
<input type="button" onclick="Msg1()" value="Show Message 1">
<input type="button" onclick="Msg2()" value="Show Message 2">
<p id="myText"></p>
</div>
<script>
function Msg1(){
document.getElementById('myText').innerHTML = 'Hey <strong>Thanks!</strong>';
}
function Msg2(){
document.getElementById('myText').innerHTML = 'Try <strong>message 1</strong> again...';
}
</script>
with user input
<div class="spec">
<input type="input" maxlength="40" id="userInput" onkeyup="showMsg()"
placeholder="Enter text here...">
<p id="userMsg"></p>
</div>
<script>
function showMsg(){
var userInput = document.getElementById('userInput').value;
document.getElementById('userMsg').innerHTML = userInput;
}
</script>
other properties
<div class="spec">
<div id="colorMsg" style="font-size:1vw;width:15vw;height:10vw;
padding:0.5vw;">Choose a background color...</div>
<select id="colorPicker" onchange="JavaScript:changeColor()">
<option value="transparent">None</option>
<option value="yellow">Yellow</option>
<option value="salmon">Salmon</option>
<option value="lightblue">Light Blue</option>
<option value="limegreen">Lime Green</option>
</select><br>
</div>
<script>
function changeColor(){
var newColor = document.getElementById('colorPicker').value;
document.getElementById('colorMsg').style.background = newColor;
}
</script>
difference between innerHTML and innerText
<div class="spec">
<div id="test">
The following element contains some <codes>code</codes> and <italic>some text</italic>.
</div>
<button onClick="innerTextFn()">innerText</button>
<button onClick="innerHTMLFn()">innerHTML</button>
<p id="op"></p>
</div>
<script>
function innerTextFn() {
var x = document.getElementById('test');
alert(x.innerText);
}
function innerHTMLFn() {
var x = document.getElementById('test');
alert(x.innerHTML);
}
</script>
The innerText property sets or returns the text content of the specified node, and all its descendants. It represents the "rendered" text content of a node and its descendants.
return the text content of a node : node.innerText;
set the text content of a node : node.innerText = text.
The innerText property returns just the text, without spacing and inner element tags.
Examples
Click the button to get the text content of the button element.
The following element contains some
<div class="spec">
<button onclick="getContent()" id="myBtn">try it</button>
<p id="innerText01"></p><br>
<div>
<p id="tpoint">The following element contains some
<codes>codes like welcome to ..</codes> and
<italic>some text like my javascript code</italic></p>.
</div>
<p></p>
<button onClick="innerTextFunction()">innerText</button>
<p></p>
<p id="innerText02"></p>
</div>
<script>
function getContent() {
let b = document.getElementById("myBtn").innerText;
document.getElementById("innerText01").innerText = b;
}
function innerTextFunction() {
var c = document.getElementById("tpoint").innerText;
document.getElementById("innerText02").innerText = c;
}
</script>
The textContent property sets or returns the text content of the specified node and all its descendants. If you set the textContent property, any child nodes are removed and replaced by a single Text node containing the specified string.
return the text content of a node : node.textContent;
set the text content of a node : node.textContent = text
Examples
click me to change my textual content.
Click the button to get the text content of the ul element.
<div class="spec">
<p id="textContent01" onclick="changeFunction()">click me to change my textual content.</p>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>Click the button to get the text content of the ul element.</p>
<button onclick="getUl()">Try it</button>
<p></p>
<p id="textContent02"></p><br>
</div>
<script>
function changeFunction() {
document.getElementById("textContent01").textContent = "Paragraph changed!";
}
function getUl() {
var dd = document.getElementById("myList").textContent;
document.getElementById("textContent02").textContent = dd;
}
</script>
The innerText property returns just the text, without spacing and inner element tags. The innerHTML property returns the text, including all spacing and inner element tags. The textContent property returns the text with spacing, but without inner element tags.
Examples
This element has extra spacing and contains a span element.
<div class="spec">
<p id="demo"> This element has extra spacing and contains <span>
a span element</span>.</p>
<button onclick="getInnerText()">get innerText</button>
<button onclick="getHTML()">get innerHTML</button>
<button onclick="getTextContent()">get textContent</button>
<p id="comparison01"></p>
<p id="comparison02"></p>
<p id="comparison03"></p>
</div>
<script>
function getInnerText() {
text = document.getElementById("demo").innerText;
document.getElementById("comparison01").innerText = "innerText: " + text;
alert(document.getElementById("demo").innerText)
}
function getHTML() {
text_1 =document.getElementById("demo").innerHTML;
document.getElementById("comparison02").innerHTML = "innerHTML: " + text_1;
alert(document.getElementById("demo").innerHTML)
}
function getTextContent() {
text_2 =document.getElementById("demo").textContent;
document.getElementById("comparison03").textContent = "textContent: " + text_2;
alert(document.getElementById("demo").textContent)
}
</script>