Innertext,outertext,innerhtml,outerhtml
This time we're going to use some other object attribute pairs to dynamically change the text, they are: innertext,outertext,innerhtml,outerhtml, be careful of their case, because the wrong point you will not get the desired effect. This is a new method, when you master it will be free to design dynamic content, you can not miss Oh!
Example 12 dynamically changing text and HTML
<title>dhtml examples 12</title>
<style><!--
Body {font-family: "XXFarEastFont-Arial"; color= "Blue"; font-size= "9pt"}
-->
</style>
<script language= "JavaScript" >
function Changetext ()
{
Dt.innertext= "I'm fine!"
}//function
function changehtml ()
{
Dh.innerhtml= "<i><u> my surname Xiao!</u></i>";
}//function
function back ()
{
dt.innertext= "Hello?"
Dh.innerhtml= "What's your last name?"
}
</script>
<body>
<p><font color= "Gray" > Please click on the text below ......</font>
<ul>
<li id= "DT" > Hello? </li>
<li id= "DH" > What's your last name? </li>
<li > Restore the original! </li>
</ul>
</body>
The InnerText property is used to define the text to be output by the object, and in this case innertext the text in the object dt "Hello?" Became "I'm fine!" (Statement dt.innertext= "I'm fine!") ）。 And the change of the object DH uses the innerHTML attribute, besides having the function of innertext, it can also change the HTML statement inside the object DH, so it turns the text into "My surname Shaw!", and the text output is changed to italic (<i></i> and add a straight line (<u></u>), that is, the statement dh.innerhtml= "<i><u> my surname Xiao!</u></i>." Outertext and outerHTML also have a similar role, readers may wish to try their own.
Now let's design an interesting dynamic page.
Dynamic input and output of example 13 text
<title>dhtml examples 13</title>
<style><!--
Body {font-family: "XXFarEastFont-Arial"; color= "Blue"; Font-size: "9pt"}
. Blue {COLOR:BLUE;FONT-SIZE:9PT}
-->
</style>
<script language= "JavaScript" >
function Outputtext ()
{
if (frm.txt.text!= "")
{output.innerhtml= "output text here:<u>" +frm.txt.value+ "</u>";} Output as an object.
Else
{output.innertext= "output text here:";}
}//function
</script>
<body>
<p><br></p>
<form name= "frm" >
<p><font color= "Gray" > Please enter text in the text box:</font>
<input type= "text" name= "TXT" size= "M" ><br>
<input type= "button" value= "Output text" name= "B1" class= "Blue" ></p>
</form>
<p id= "Output" > outputs text here:</p>
</body>
The dynamic effect of this example is to enter the text in the text box, and then press the "Output text" button, and then the page will automatically output the text you entered.
In addition, we can use the insertAdjacentHTML and insertAdjacentText methods, which are functions that a particular object can call directly, to insert new text or HTML content in front of or behind previous text or HTML content, using these methods to require parameters, These parameters are: Beforebegin, Afterbegin, BeforeEnd, and Afterend, which are used to indicate where text or HTML is inserted. Use the following example:
Example 14 inserting text using insertadjacenthtml
<title>dhtml examples 14</title>
<style><!--
Body {font-family: "XXFarEastFont-Arial"; color= "Blue"; Font-size: "9pt"}
-->
</style>
<script language= "JavaScript" >
function Insert ()
{
Document.all.New.insertAdjacentHTML ("Afterbegin", "<font color=red>-new inserted content-<font>");
The first parameter is used to indicate the location, and the second parameter is the HTML content to insert.
}//function
</script>
<body>
<p><br>
</p>
<p id= "New" > click on this line of blue text to insert text </p>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
