JavaScript innerHTML

 JavaScript’s innerHTML is actually a function of HTML DOM . You can get or set elements in HTML Code through innerHTML, or simply write a string into a certain part of HTML Code. InnerHTML can be executed with HTML’s Element Object, such as getElementById or getElementsByName, etc., innerHTML is also a webpage designer commonly used to design webpage special effects to interact with netizens. All mainstream browsers support JavaScript innerHTML function.

JavaScript innerHTML basic syntax

HTMLDOMObject.innertHTML

As mentioned in the first paragraph, innerHTML is often used in conjunction with getElementById or getElementsByName . For example, getElementById("ID").innerHTML is a very common way of writing. After obtaining the ID element in the web page, you can write it Write the string or HTML Code to the ID element.

JavaScript innerHTML example 1: Change the text in the webpage

<script type="text/javascript">
function ShowAnswer(){
    document.getElementById("AnswerBox").innerHTML='2';
}
</script>
1+1=<span id="AnswerBox">_</ span>　
<input type="button" value="Show answer" onclick="ShowAnswer()">

The above example output

1+1= _Show　 

At the beginning of the example, a function called ShowAnswer was written to display the answer. When a netizen presses the button ( button ) that displays the answer , it is immediately monitored by the onclick event and the ShowAnswer function is automatically triggered. The real point is here. The ShowAnswer function will use document.getElementById to find the span area whose id is AnswerBox , and write the answer into the span area through innerHTML . The operation of the entire program is completed.

JavaScript innerHTML example two, change the HTML Code in the webpage

<script type="text/javascript">
function ChangeFontColor(){
    var OriginalFont=document.getElementById("StringFont").innerHTML;
    document.getElementById("StringFont").innerHTML='<font color="blue">' +OriginalFont+'</font>';
}
</script>
<p id="StringFont">Try to change the text to blue</p>
<input type="button" value="change text color" onclick=" ChangeFontColor()">

The above example output

Try to turn the text blue

When a user presses the button to change the text color, the ChangeFontColor function is immediately triggered. The first line of ChangeFontColor first sets a variable OriginalFont to store the original string content. The content with the original id of StringFont can be obtained through innerHTML, and then The second line is to add the original text plus HTML font text color modification grammar, and write them into the span area whose id is StringFont to complete the text color change. The same technique can also be applied to change the HTML Code in other web pages.

JavaScript innerHTML example 3. Change the webpage based on the content entered by netizens

<script type="text/javascript">
function ChangeString(){
    var NewStringValue=document.getElementById("StringTextBox").value;
    document.getElementById("NewStringBox").innerHTML=NewStringValue;
}
</script>
<p id ="NewStringBox">Please enter new text to change this text</p>
<input type="text" id="StringTextBox">
<input type="button" value="change text" onclick="ChangeString( )">

The above example output

Please enter new text to change this text

 

This example is similar to the previous example. The biggest difference is that we need to get the text content entered by the netizen first, so we first get the content of the text input field (input text) through the value method of document.getElementById , and get the content. Save it as the variable NewStringValue, and then, like the example above, write the new content obtained through innerHTML into the span area with the id of NewStringBox . This technique is commonly used in the design of HTML Form forms .