<Script language = "JavaScript">
// Document. Body. insertadjacenthtml ("beforebegin", "<input name = 'TT' type = 'text' value = 'beforebegin '/> ");
Document. Body. insertadjacenthtml ("afterbegin", "<input name = 'TT' type = 'text' value = 'afterbegin '/> ");
Document. Body. insertadjacenthtml ("beforeend", "<input name = 'TT' type = 'text' value = 'foreend'/> ");
// Document. Body. insertadjacenthtml ("afterend", "<input name = 'TT' type = 'text' value = 'afterend'/> ");
</SCRIPT>
DHTML operations that dynamically change web page content
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. The following code will cause an error:
<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.
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
