These object attributes are used to dynamically change the text, so that C #'sCodeTo write the HTML display of the page. Innertext, outertext, innerhtml, and outerhtml are case sensitive! The following examples can help you understand the situation!
<HTML>
<Head>
<Title> DHTML example </title>
<Style>
<! --
Body {font-family: ""; color = "blue"; font-size: "9pt "}
. Blue {color: Blue; font-size: 9pt}
-->
</Style>
<Script language = "JavaScript">
Function changetext ()
{
DT. innertext = "I'm fine! ";
} // Function
Function changetext2 ()
{
Do. innertext = "<I> <u> you only know what to eat! </U> </I> ";
} // Function
Function changehtml ()
{
DH. innerhtml = "<I> <u> my name is Yang! </U> </I> ";
} // Function
Function changehtml2 ()
{
DM. innerhtml = "I am from heaven! ";
} // Function
Function back ()
{
DT. innertext = "Hello? ";
DH. innerhtml = "What is your surname? ";
Do. innertext = "have you eaten? ";
DM. innerhtml = "Where do you come from? ";
}
//-----------
</SCRIPT>
<Script language = "JavaScript">
//-----------
Function outputtext ()
{
If(frm.txt. Text! = "")
{Output. innerhtml = "output text here: <u>" frm.txt. Value + "</u>" ;}// output is an object.
Else
{Output. innertext = "output text here :";}
} // Function
//-----------
</SCRIPT>
<Script language = "JavaScript">
//-----------
Function insert ()
{
Document. all. new. insertadjacenthtml ("afterbegin", "& lt; P id = & quot; last & quot; onclick = & quot; insert2 () & quot; & gt; & lt; font color = & quot; Red & quot; & gt;-newly inserted content 1-& lt; font & gt; & lt;/P & gt ;");
// The first parameter is used to specify the location, and the second parameter is the HTML content to be inserted.
} // Function
//-----------
</SCRIPT>
</Head>
<Body>
<P> <font color = "gray"> click the text below ...... </Font>
<Ul>
<Li id = "DT" onclick = "changetext ()"> hello? </LI>
<Li id = "do" onclick = "changetext2 ()"> have you eaten? </LI>
<Li> <HR/> </HI>
<Li id = "DH" onclick = "changehtml ()"> what is your surname? </LI>
<Li id = "dm" onclick = "changehtml2 ()"> where do you come from? </LI>
<Li> <br/> </LI>
<Li onclick = "back ()"> restore to original state! </LI>
</Ul>
<P> <br> </P>
<Form name = "frm">
<P> <font color = "gray"> Enter text in the text box: </font>
<Input type = "text" name = "TXT" size = "50"> <br>
<Input type = "button" value = "output text" name = "B1" class = "blue" onclick = "outputtext ()"> </P>
</Form>
<P id = "output"> output text here: </P>
<P> <br>
</P>
<P id = "new" onclick = "insert ()"> click the blue text in this row to insert the text. </P>
<Br>
<HR/>
</Body>
</Html>
The innertext attribute is used to define the text to be output by the object, and the innerhtml attribute is used to change the object DH. In addition to the innertext attribute, the innertext attribute can also change the HTML statement within the object DH.
Unlike innerhtml, outerhtml includes the entire tag, not limited to the content inside the tag.
For a div whose ID is "testdiv", outerhtml, innerhtml, and innertext
The differences between the three methods can be shown as follows:
As for outertext, you have time to try it!
You can also use the insertadjacenthtml and insertadjacenttext methods (methods are functions that can be directly called by a specific object) to insert new text or HTML content into the front or back of previous text or HTML content, parameters are required to use these methods: beforebegin, afterbegin, beforeend, and afterend, which are used to indicate text or HTML insertion.
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
