Seventh dynamic creation of HTML content

JavaScript can also change the structure and content of a Web page

• document.write () method

You can easily and quickly insert a string into a document.

document.write ("<strong>hello world.</strong>"); /* function INSERTP (text) {    var str = "<p>";    str + = text;    str + = "</p>";    document.write (str);} INSERTP ("Hello world!"); */

• innerHTML Property

This property can be used to read and write HTML content in a given element.

<div id= "Test" >    </div><script type= "Text/javascript" >    function() {        var testdiv = document.getElementById ("test");         = "<p> This is a sentence </p>"    }</script>

• CreateElement () method

Creates a node of an element. The method itself is not useful, and the newly created elements need to be inserted into the document to achieve the actual purpose.

Document.createlement (Node.name)

• AppendChild () method

Let the newly created node become a child of one of the existing nodes of the document.

Parent.appendchild (Child)

var test = document.getElementById ("test"); var para = document.createelement ("P"); Test.appendchild (para);             // document.getElementById ("test"). AppendChild (Document.createelement ("P"));

• Creattextnode () method

Creates a text node. Syntax: Document.creattextnode (text)

var test = document.getElementById ("test"); var txt = document.createtextnode ("Hello World"); Test.appendchild (text);

• InsertBefore () method

This method inserts a new element into the front of an existing element. To call this method, you must know three things:

-New element to insert

-You want to insert the new element in front of which existing element

-These two elements are common to the parent element

Parentelement.insertbefore (newelement,targetelent)

For example, insert the description in front of the picture list imagegallery.

var gallery = document.getElementById ("Imagegallery");      Gallery.parentNode.insertBefor (description,gallery);

• Writing the InsertAfter () function

/** *function  insertafter (newelement,targetelement    ) {var parent = Targetelement.parentnode;     if (Parent.lastchild = = targetelement) {        parent.appendchild (newelement);    } Else {        parent.insertbefor (newelement,targetelement.nextsibling);    }}

Seventh dynamic creation of HTML content