The DHTML Object of IE provides four readable and writable attributes to dynamically manipulate the content of page elements: innertext, outertext, innerhtml, and outerhtml.
Pay attention to the following two points:
1. the values of innertext and outertext are displayed as common text, and are actually reflected even if they contain HTML tags. innerhtml and outerhtml present the text after being parsed by the HTML engine, it can reflect the performance of HTML tags in attributes.
2. assigning values to the outertext and outerhtml attributes of an object (that is, the write operation) will delete the object.
The assignment operation of the above four attributes only replaces the text content of the original object. To add text content at the specified Element location on the page, the insertadjacenthtml and insertadjacenttext methods must be used. The format is as follows:
Object. insertadjacenttext (swhere, stext)
Object. insertadjacenthtml (swhere, stext)
Swhere indicates the position of the inserted text relative to the HTML tag, which has the following four preset values:
Beforebegin, afterbegin, beforeend, afterend
Pay attention to the following points during use:
1. These two methods must be used after the entire document is loaded. Otherwise, an error will occur.
2. insertadjacenttext can only insert common text, insertadjacenthtml insert HTML text
3. Use insertadjacenthtml to insert a script. The defer attribute must be used in the script element. Otherwise, a runtime error occurs during script execution.
4. After insertadjacenthtml inserts HTML elements, all and other possible element sets are automatically updated to reflect dynamic changes. For example, the sourceindex attribute of subsequent elements on the page will change.
5. When an invalid HTML Tag is assigned to the inserthtml/outerhtml attribute, this method may cause a runtime error. See the followingCodeError:
<Body>
<P id = pdiv> </P>
<Script language = "JavaScript">
Pdiv. innerhtml = "<p> Hello </P>"
</SCRIPT>
</Body>
In addition, pay attention to the following details for dynamic page content operations:
1. Only the content displayed in the document body can be dynamically changed by the above attributes and methods. The content of the body object can be dynamically operated, but the body object itself cannot be replaced.
2. The preceding attributes and methods cannot operate empty tags (HTML tags without content), such as input and IMG.
3. for Table objects, only TD (innerhtml/innertext) and table (outerhmtl/outertext) objects can be replaced or inserted with certain attributes. For other table objects, for example, TR and tbody cannot use these attributes to change the content.
Previously, the innerhtml and innertext methods were used to add HTML content and text content. Recently, insertadjacenthtml and insertadjacenttext methods were found to be more flexible, you can insert HTML content and text content in a specified place. Insertadjacenthtml method: insert the HTML Tag statement in the specified place
Prototype: insertadajcenthtml (swhere, stext)
Parameters:
Swhere: specifies where HTML tag statements are inserted. Four values are available:
1. beforebegin: before the start of the tag
2. afterbegin: inserted after the tag starts Marking
3. beforeend: insert to the end tag of the tag.
4. afterend: insert to the end tag of the tag.
Stext: content to be inserted
<HTML>
<Head>
<Script language = "JavaScript">
Function myfun ()
{
VaR OBJ = Document. getelementbyid ("btn1 ");
OBJ. insertadjacenthtml ("afterend", "<br> <input name = \" txt1 \ "> ");
}
</SCRIPT>
</Head>
<Body>
<Input name = "TXT">
<Input id = "btn1" name = "btn1" type = "button" value = "more..." onclick = "myfun ()">
</Body>
</Html>
==================================
<Head>
<Title> 24.htm insertadjacenthtml Insert new content </title>
<Script language = "jscript">
Function addsome ()
{
Document. All. paral. insertadjacenthtml ("afterbegin", "Document. All. paral. insertadjacenthtml ("beforeend", "<H2> insert content in the container after text </H2> ");
Document. All. paral. insertadjacenthtml ("beforebegin", "<H4> insert content outside the container before text Document. All. paral. insertadjacenthtml ("afterend", "<H5> insert content outside the container after text </H2> ");
}
</SCRIPT>
</Head>
<Body onload = "addsome ()">
<Div id = "paral" style = "fontsize: 6; color = '# ff00ff'"> original content </div> <HR>
</Body>
</Html>
======================================
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
<HTML>
<Head>
<Title> new document </title>
<Meta name = "generator" content = "editplus">
<Meta name = "author" content = "">
<Meta name = "keywords" content = "">
<Meta name = "Description" content = "">
</Head> <body>
<SCRIPT>
VaR num = 0;
VaR no_sys = 0;
Function add_button (){
If (no_sys <8 ){
C_input.insertadjacenthtml ("beforeend", "<Div id = \" bar "+ num +" \ "oncontextmenu = \" remove_button (Bar "+ num + "); return false \ "style = \" Background: red; width: 40; Height: 20 \ ">" + num + "</div> ");
Num ++;
No_sys ++;
}
}
Function remove_button (OBJ ){
OBJ. removenode (true );
No_sys --;
}
</SCRIPT>
<Input type = "button" onclick = "add_button ()" value = "dynamic addition">
<Input type = "button" onclick = "alert (c_input.innerhtml)" value = "">
<Div id = "c_input">
</Div>
</Body>
</Html>
Usage:
<Div id = "test">
<Span style = "color: Red"> test1 </span> Test2
</Div>
In JS, you can use:
Test. innerhtml:
That is, all content from the starting position of the object to the ending position, including HTML tags.
In the preceding example, the value of test. innerhtml is "<span style =" color: Red "> test1 </span> Test2 ".
Test. innertext:
Content from the starting position to the ending position, but it removes the HTML Tag
In the preceding example, the value of text. innertest is "test1 Test2", in which the span tag is removed.
Test. outerhtml:
In addition to all the content of innerhtml, it also contains the object tag itself.
In the preceding example, the value of text. outerhtml is <Div id = "test"> <span style = "color: Red"> test1 </span> Test2 </div>.
Complete example:
<Div id = "test">
<Span style = "color: Red"> test1 </span> Test2
</Div>
<A href = "javascript: Alert (test. innerhtml)"> innerhtml content </a>
<A href = "javascript: Alert (test. innertext)"> inerhtml content </a>
<A href = "javascript: Alert (test. outerhtml)"> outerhtml content </a>
Note:
Innerhtml is a W3C standard attribute, while innertext is only applicable to IE browsers. Therefore, use innerhtml as much as possible, instead of innertext. If you want to output content without HTML tags, you can use innerhtml to obtain the content containing HTML tags and use regular expressions to remove HTML tags. The following is a simple W3C-compliant example:
<A href = "javascript: Alert (document. getelementbyid ('test'). innerhtml. Replace (/<. ++?> /Gim, '')"> no html, compliant with W3C standards </a>
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
