JavaScript manipulating DOM elements

1. Steps to create DOM dynamically

(1) Call the document's CreateElement method to create a DOM object with the specified label

(2) then add the newly created element to the appropriate element by calling the AppendChild () of the element.

2. How to manipulate the DOM

createelement (' element '); Create a node

Document.createelement (' <input type= ' button ' value= ' Hello '/> '), create elements quickly, and assign values, However, note that the inner section of the settings will not be set document.createelement (' <a href= ' www.baidu.com ' > Baidu </a> '); Note: "Baidu" is not written in the two words

AppendChild (node);

RemoveChild (node); Remove a node

ReplaceChild (new,old); Replace a node

InsertBefore (new, reference); Add a node to the front (plug in front of a node)

FirstChild

LastChild

3. Sample Code

Example code: Adding a DIV element

<! doctype html public  "-//w3c//dtd html 4.01 transitional//en"   "HTTP// Www.w3.org/TR/html4/loose.dtd ">
650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/86/A0/wKioL1fF2meA-jYLAAEGwz-mCgU854.gif "title=" create _div.gif "alt=" Wkiol1ff2mea-jylaaegwz-mcgu854.gif "/>

Example code: Adding a DIV element (with style)
<! doctype html public  "-//w3c//dtd html 4.01 transitional//en"   "HTTP// Www.w3.org/TR/html4/loose.dtd ">
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/86/A0/wKioL1fF2tCC7K8ZAACXJYhgS2o574.gif "title=" create _div_with_style.gif "alt=" Wkiol1ff2tcc7k8zaacxjyhgs2o574.gif "/>

Example code: Adding a button and a text box to a DIV element
<! doctype html public  "-//w3c//dtd html 4.01 transitional//en"   "HTTP// Www.w3.org/TR/html4/loose.dtd ">

One (Firefox second button can not be used, do not know why)
650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/86/A0/wKiom1fF3PbSjZ-vAAE-_DDC4xI046.gif "title=" create _input_firefox.gif "alt=" Wkiom1ff3pbsjz-vaae-_ddc4xi046.gif "/>
Two
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/86/A0/wKioL1fF3QKwzkVFAAFoLcwWbUs127.gif "title=" create _input_ie.gif "alt=" Wkiol1ff3qkwzkvfaafolcwwbus127.gif "/>


Sample code: Delete all elements in div
<! doctype html public  "-//w3c//dtd html 4.01 transitional//en"   "HTTP// Www.w3.org/TR/html4/loose.dtd ">
650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/86/A0/wKiom1fF3eDgAOzgAAFfmWd3xdQ621.gif "title=" create _input_ie_delete.gif "alt=" Wkiom1ff3edgaozgaaffmwd3xdq621.gif "/>





JavaScript manipulating DOM elements