IE's DHTML object provides four readable and writable properties to dynamically manipulate the content of page elements: innerText, outerText, innerHTML, outerHTML.
Two points should be noted:
1. The values of the innerText and outerText properties are presented as ordinary text. Even if it contains HTML tags, it will be reflected truthfully; while innerHTML and outerHTML present the text parsed by the HTML engine, which can reflect the performance effect of the HTML tags in the attributes.
2. Assigning values to the outerText and outerHTML attributes of an object (that is, writing operations) will delete the object.
The assignment operation of the above four attributes only replaces the text content of the original object. If you want to add new text content at the relevant position of the specified element in the page, you need to use the insertAdjacentHTML and insertAdjacentText methods. The form is as follows:
object.insertAdjacentText(sWhere, sText)
object.insertAdjacentHTML(sWhere, sText)
Among them, sWhere represents the position of the inserted text relative to the html tag. It has the following four preset values:
beforeBegin, afterBegin, beforeEnd, and afterEnd.
Please pay attention to the following points when using them:
1. These two methods must be used after the entire document is loaded, otherwise an error will occur.
2. InsertAdjacentText can only insert ordinary text, and InsertAdjacentHTML can insert text in html format
3. When using InsertAdjacentHTML to insert a script, you must use the defer attribute in the script element, otherwise a runtime error will occur during script execution
4. After InsertAdjacentHTML inserts an html element, all and other possible element collections will be automatically updated to reflect dynamic changes. For example, the sourceIndex attribute of subsequent elements on the page will change.
5. This method may cause runtime errors when assigning InsertHTML/outerHTML attributes to invalid HTML tags. For example, the following code will cause an error:
<BODY>
<p id=pdiv></p>
<SCRIPT LANGUAGE="JavaScript">
pdiv.innerHTML = "<p>hello</p>"
</SCRIPT>
</BODY>
In addition, the following details need to be paid attention to when dynamically operating page content:
1. Only the content displayed in the document BODY can be dynamically changed by the above properties and methods. The content of the BODY object can be dynamically manipulated, but the BODY object itself cannot be replaced.
2. The above attributes and methods cannot operate on 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 use certain attributes to replace or insert content; other table objects, such as tr and tbody, cannot use these attributes to change the content.