SoFunction
Updated on 2025-03-01

Example analysis of usage examples of innerText and innerHTML attributes in javascript

This article describes the usage of innerText and innerHTML attributes in javascript. Share it for your reference. The specific analysis is as follows:

Almost all DOM elements have innerText and innerHTML attributes (note the case), which are in the element labels respectively.
The text representation and HTML source code are readable and writable

innerHTML can also replace createElement, which is a simple, extensive and at your own risk of the consequences.

<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>test(innerTextandinnerHTML)</title>
 <script type="text/javascript">
 function TestOutput() {
  var myLink = ("lnk");
  alert('innerText-->' + );
  //Get Baidu website  alert('innerHTML-->' + );
  //Get the website of 100<font color="red">re"</font> }
 function EditInnerText() {
  var myLink = ("lnk");
   = "Phoenix.com";
 }
 function EditInnerHTML() {
  var myLink = ("lnk");
   = "&lt;font color='blue'&gt;Phoenix.com&lt;/font&gt;";
 }
 function dynamicButtonClick() {
  alert('I created it dynamically');
 }
 function CreateButton() {
  var div = ("divMain");
   = "&lt;input type='button' value='Click Me' 
  onclick='dynamicButtonClick()' /&gt;";
 }
 &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;a href="" &gt;
Hundred&lt;font color="red"&gt;Spend&lt;/font&gt;website&lt;/a&gt;
&lt;input type ="button" value="test" onclick="TestOutput()"/&gt;
&lt;input type="button"" value="Modify InnerText" onclick="EditInnerText()"/&gt;
&lt;input type="button"" value="Modify InnerHTML" onclick="EditInnerHTML()"/&gt;
&lt;div &gt;&lt;/div&gt;
&lt;input type="button" value="Dynamic Add Button" onclick="CreateButton()"/&gt;
&lt;/body&gt;
&lt;/html&gt;

I hope this article will be helpful to everyone's JavaScript programming.