Seventh dynamic creation of HTML content

Source: Internet
Author: User

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 (

    • 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.