Javascript DOM Programming Art reading notes 16/04/02

Last Updated 2016-04-02 16:14:06

Objective:

This section tells you how to dynamically insert content into HTML by using JSP syntax to change the existing content of HTML.

If we dig deeper into the DOM tree, we know that HTML content actually exists as a node tree, changing the content, that is, adding a new node to the node tree.

Of course, we use JSP to add content to the Web page, and will not change the original HTML document

Two important functions for creating a node

Createelemnt ("x") creates an element node that returns a reference to the newly created node

createTextNode ("text") to Create a text node

For example, to create a P node, we use document as the parent node

var // para a reference to the newly created "P"

There is nothing inside this p-node, and this element is free from the document, and we cannot see it on the Web page, but this element does exist.

Of course, we can setattribute to this new element node. Adding attribute Nodes

Important functions for mounting newly created nodes built-in (cannot attach nodes to text nodes)

Appenchild (NewNode) general formula for parent.appendchild ("NewNode")

InsertBefore (Newnode,targetnode) inserted before TargetNode

Create a new Insert function with built-in functions InsertAfter

function　　InsertAfter (newnode,targetnode) {  var parent = Taretnode.parentnode;　　 if(targetnode.node==parent.lastchild) {parent.appendchild (newnode);　　}Else{parent.insertbefore (Newnode,targetnode.nextsiblingnode); }}

Javascript DOM Programming Art reading notes 16/04/02