Dynamically change Web page HTML elements (objects) content _ Experience Exchange

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

　　dynamically change 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-formatted 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 as text directly in the page. When set with the outerHTML and Outertexe properties, the Element (object) is completely replaced. See the PC World website for specific examples of what to do.

　　Modify Page HTML elements

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

Adding a new element to a Web page is a 2-step process of creating a new Element (object) before inserting the newly created element (object) into the Web page. Before inserting to a Web page, the properties of the element (object) are allowed to be set, but cannot be referenced by an element (object) ID. You can also use Document.createelement to create a new element with parameters that are a valid HTML-formatted label string (containing element attributes) for the element. You can also create a new element by copying the element (object) by means of the element (object) CloneNode method. Inserting a new element into a document can be accomplished 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 element (object) sub-element collection.

Replace, delete element (object) need to note: ① the parameter specified in ReplaceChild, removechild must be a direct child element (object) of the element (object); ② when you replace an element (object) with ReplaceNode, all attributes and content associated with that element (object) are also replaced, ③ if the parameter specified in Removenode is true, all child elements (nodes) contained by that element are also deleted, by default false, i.e., no child elements are deleted (node). See the PC World website for specific examples of what to do.

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 location of the element (object), respectively ), 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 the specified insert before the element (object); Afterbegin Specifies that all content is inserted before the element (object); BeforeEnd specifies that after all the contents of an element (object) are inserted; AFTEREND specifies that the insertion is after an element (object). See the PC World website for specific examples of what to do.

Dynamic changes in Web pages use our menu program as an example to demonstrate the application of page elements and element content modifications. The program flexibly uses elements creation, append, delete and other methods and innerHTML properties to build menus and submenus (the program uses XML technology to read menu data, the relevant XML technology refer to the relevant manual), the program slightly modified to become a very powerful utility menu program. Use the sample source code as follows.

----< HTML >< head >
----< title > Integrated Application Examples </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 >Webmaster code that generates elements directly with JavaScript

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

ABCDE

-----------------End------------------

　　about Dynamic HTML

Also known as DHTML, is one of the most exciting innovations in the Web development process in recent years, providing the ability to change content or appearance at any time via a client browser after a webpage has been downloaded. It is not a specialized technology, but a concept that is realized through the comprehensive development of various technologies, including DOM (Document Object model), Jscript, CSS, and so on. The core of DHTML is the DOM model, which makes the Web pages written in the traditional HTML language have dynamic characteristics. Note: The DOM models supported by different browsers are not identical.

