Javascript-dom Dynamic creation Tags for learning notes

Most of the previous DOM was used to find elements, and getElementById and getElementsByTagName were quick and easy to find one or some particular element nodes in the document. These elements can then be handled using methods and properties such as setattribute (changing the value of a property) and nodevalue (changing the text contained in an element node). is to make changes to existing elements.

This article changes the structure of the Web page by creating new elements and modifying existing elements

The standard Dom method can be used instead of innerHTML, which provides higher accuracy and more powerful features!

Dom Method:

The contents of the browser are actually all part of the DOM node tree, and in the browser's view, the DOM node tree is the document

Dynamically created tags are not created in markup, but are changing the DOM node tree.

In the DOM's view, a document is a node tree. If you want to add content from the number of nodes, you must insert a new node. If you want to add some markup to the document, you must insert the element node

createelement Method: Create ELEMENT nodes (such as <p>,<a>,<span> ）

Format: document.createelement ("tag name");

The newly created tag already exists, but it does not belong to any of the DOM node number, he is just an orphan in JS World, called: document fragment Fragment

Its nodename=p,nodetype=1

createTextNode Method: Creating a text node (that is, adding content within a tag)

Format: document.createTextNode ("content");

AppendChild Method: Connect (Put the orphan in the JS World, add to the node tree, find his home)

Format: Parent.appndchild (child);

There are two sequential methods:

1. First create the label, then append the tag to the node tree, create the content, append the content to the tag

2. See Create tags, create content, append content to tags, and append tags to node tree

　　I prefer the second kind of writing, the sense of thinking will be more clear　　

Example: Add a P tag inside the body and create an EM tag in P with the content: <p>this is <em>my</em> content</p>;

Special reminder: Inserting text content using the AppendChild property does not overwrite the contents of the previous label, which can be compared with innerHTML

A new question can be found on the:<p> tag after the <script> tag, because the inserted label is automatically listed by default in all child nodes then we need to New method to control where elements are inserted;

element insertion Position setting:

Insertbofore () method: This method inserts a new element into the front of an existing element;

Format: parentelement (parent element of the target element). InsertBefore (Newelement (new Element), Targetelement (target Element))

Introduction: ParentNode: Gets the Parent object in the document hierarchy

Tip: You don't need to bother to find the parent element of the target element, you can take advantage of parentnode, the parent element of the target element = Targetelement.parentnode

Unfortunately, we have a insertbefore method, but we do not have a InsertAfter method; but we can write a InsertAfter () function instead

InsertAfter () function:

Ideas:

1. Determines whether the target element is the last element of the parent,
2. If it is, use Appenchild to insert the new element after the target element
3. If not, use Insertbofore to insert the new element before the next child element of the target element.

Introduction: NextSibling Property: Represents the next node of the current node (the node that follows is the same level as the current node), or null if there is no subsequent node with its sibling.

Javascript-dom Dynamic creation Tags for learning notes