Dynamically changing Web page HTML element (object) Content _ Experience Exchange

The presence of Dynamic HTML provides a mechanism for users to create interactive pages based on traditional standard HTML. This article focuses on IE 5.0 how to use scripts to add, delete, and modify HTML elements (objects) and Element (object) content in a page by using the HTML Document object (DOM) model provided by it.

　　dynamically changing Web page HTML element (object) content

HTML block-level elements (objects) provide 4 read-write properties innerHTML, innertext, outerHTML, outertext to change Element (object) content (as shown in table 1).

When the innerHTML property is set, the given string completely replaces the existing element (object) content, and if the given string contains an HTML format label, the string is parsed and formatted. When set with the InnerText property, the given string also completely replaces the existing element (object) text content, but unlike innerHTML, the HTML format label is displayed directly in the page as text. When set with the outerHTML and Outertexe properties, the Element (object) is completely replaced. Refer to the PC World Web site for specific examples of operations.

　　Modify Page HTML elements

The method for modifying elements (nodes) provided by the IE 5.0 Chinese Document Object Model (DOM) is shown in table 2.

Adding new elements to a Web page is divided into 2 steps, creating new elements (objects) before inserting the newly created elements (objects) into the Web page. Before inserting into a Web page, it is allowed to set the properties of the element (object), but not by the element (object) ID. You can also use Document.createelement to create a new element with a parameter that is a legitimate HTML format label string (containing element attributes) for the element. In addition, you can create new elements by copying the element (object) by the element (object) CloneNode method. Inserting a new element into a document can be implemented by using the element (object) AppendChild or InsertBefore method, which inserts a new element at the end of the element (object) child element collection, which inserts a new element before a child element in the collection of Element (object) children.

Replace, delete element (object) Note: ① The parameter specified in ReplaceChild, removechild must be a direct child element (object) of that element (object); ② when you replace an element (object) with ReplaceNode, all the properties and content associated with the element (object) are also substituted; ③ if the specified argument in Removenode is true, all child elements (nodes) that the element contains will also be deleted, default false, which does not delete child elements (node). Refer to the PC World Web site for specific examples of operations.

Insert a Web page new element (object), HTML, or text content in addition, you can also use methods such as Insertadjacenelement, insertAdjacentHTML, and insertadjacenttext to insert new elements (objects) at the specified position of the element (object) , HTML, or text content (as shown in table 3).

The position in which the element (object), HTML, or text content is inserted is specified by the parameter. BEFOREBEGIN specifies that the insertion is preceded by an element (object); AFTERBEGIN specifies that the insertion is preceded by all content of the element (object); BeforeEnd specifies that after all the contents of the element (object) are inserted; Afterend specifies that after the element (object) is inserted. Refer to the PC World Web site for specific examples of operations.

Comprehensive application of Web page dynamic Change We use the menu program as an example to demonstrate the application of Web element and element content modification. This program flexibly uses the element creation, append, deletes and so on the method and the innerHTML attribute to establish the menu and the submenu (this program uses the XML technology to read the menu data, regarding the XML technology please refer to the related manual), this program slightly modifies can become a very powerful practical menu program. The comprehensive use of the sample source code is as follows.

----< HTML >< head >
----< title > Comprehensive Application Example </title >
----< script > var activemenu,menucontainer=null;
----function Menusetup () {
----var parentmenuitems=menuxml.selectnodes ("//menulist/menu");
----var xmlelement=parentmenuitems.nextnode ();
----while (xmlelement!=null) {
----var newelement=document.createelement ("span");
----Newelement.innertext =xmlelement.getattribute ("display");
----Newelement.id=xmlelement.getattribute ("value")
----newelement.type= "Parentmenu"
----newelement.style.width=100;
----newelement.style.backgroundcolor= "#CCCCCC";
----Menubar.appendchild (newelement);
----XmlElement = Parentmenuitems.nextnode (); }}
----function Menuclick () {
----Eventsource=event.srcelement
----switch (eventsource.type) {
----Case "Parentmenu":
----Removesubmenu ();
----Buildsubmenu (eventsource.id);
----Eventsource.setcapture ();
----Activemenu=eventsource;
----break;
----Default:
----Activemenu.releasecapture ();
----Removesubmenu ();
----Activemenu=null;
----break;} }
----function Buildsubmenu (Eventsourceid) {
----Menucontainer=document.createelement ("div");
----menucontainer.style.backgroundcolor= "#DD00DD";
----menucontainer.style.width=100;
----eval (Eventsourceid). appendchild (Menucontainer);
----var submenuitems=menuxml.selectnodes ("//menu[@value = '" +eventsourceid+ "']/item");
----var xmlelement=submenuitems.nextnode ();
----while (xmlelement!=null) {
----var newelement=document.createelement ("div");
----Newelement.innerhtml=xmlelement.getattribute ("display");
----Menucontainer.appendchild (newelement);
----Xmlelement=submenuitems.nextnode (); }}
----function Removesubmenu () {
----if (menucontainer!=null) Menucontainer.removenode (true);}
----</script >
--------< XML id=menuxml >< menulist >
----< menu display= "file" value= "file" >
----< Item display= "new" value= "new"/>
----< Item display= "open" value= "open"/>
----< Item display= "save" value= "save"/>
----</menu >
----</menulist ></xml >
----< div id=menubar Onclick=menuclick () ></div >
----</body >The webmaster uses JavaScript to directly generate the element code

-----------Start----------------------------

<input type= "button" name= "AA" value= "AA" onclick= "Showdiv" (); " />
ABCDE
<script>
function Showdiv () {
var div = document.createelement ("div");
Div.style.top = 300;
Div.style.left = 300;
Div.style.backgroundColor = "Red";
Div.style.display = "inline";
div.innerhtml = "Hello, world."
Document.body.appendChild (DIV);
}
</script>
-----------------End------------------

　　about Dynamic HTML

Also known as DHTML, it is one of the most exciting innovations in the process of network development in recent years, and it provides the ability to change the content or appearance at any time after downloading a Web page by using a client browser. It is not a specialized technique, but a concept that is implemented through the comprehensive development of various technologies, including the DOM (Document Object model), Jscript, CSS, and so on. The core of DHTML is the DOM model, which makes the Web pages written by traditional HTML languages dynamic. Note: The DOM models supported by different browsers are not exactly the same.