Javascript DOM notes: Modify the DOM

 

 

Common functions:

 

Createelement: creates an element. It is not displayed immediately and must be bound to a parent node)

 

Createtextnode: Create a text node. It is not displayed immediately and must be bound to a parent node)

 

Insertbefore inserts an element before an element under the parent node (after insertion, the browser renders it instantly)

 

Appendchild adds an element to the last position of the parent node (after insertion, the browser renders it instantly)

 

Removechild deletes a node from the parent node (after deletion, the browser renders it instantly)

 

 

The following functions are provided in Javascript proficiency

 

Function Checkelem (ELEM) {
//If only a string is provided, it is converted to a document node.
ReturnELEM&&ELEM. Constructor=String?Document. createtextnode (ELEM): ELEM;
} ;

Function Append (parent, ELEM) {
Parent. appendchild (checkelem (ELEM ));
} ;

Function Before (parent, before, ELEM) {
// If only two parameters are passed in, you need to obtain the parent node of the first parameter to use the inserbefore function.
If (ELEM =   Null ) {
ELEM=Before;
Before=Parent;
Parent=Before. parentnode;
}
Parent. insertbefore (checkelem (ELEM), before );
} ;

 

ELEM & ELEM. constructor = string ...... Here, the operation order is ELEM & (ELEM. constructor = string )......

 

In addition, inserting data directly from innerhtml is more efficient, but XML does not support the innerhtml attribute.

 

If the ELEM parameter to be passed in is a mixed array of DOM nodes and HTML strings, the improved function is as follows:

 

Function Checkelem () {
VaR R = [];
// If the parameter is not an array, forcibly convert it
If (A. Constructor ! = Array)
A = [A];
For ( VaR I =   0 ; I < A. length; I ++ ) {
If (A [I]. Constructor = String) {
// Store HTML with a temporary variable
VaR Div = Document. createelement ( " Div " );
// Inject HTML into the DOM Structure
Div. innerhtml = A [I];
// Extract the DOM structure to the temporary Div
For ( VaR J =   0 ; J < Div. childnodes. length; j ++ )
R [R. Length] = Div. childnodes [J];
}
Else   If (A [I]. length) {
// Assume it is a DOM node Array
For ( VaR J =   0 ; J < A [I]. length; j ++ )
R [R. Length] = A [I] [J];
}
Else   {
//Otherwise, assume it is a DOM node.
R [R. Length]=A [I];
}
}
Return R;
} ;

Function Before (parent, before, ELEM) {
// Check whether parent node parameters are provided
If (ELEM =   Null ) {
ELEM=Before;
Before=Parent;
Parent=Before. parent;
}

// Get a new array of Elements
VaR Elems = Checkelem (ELEM );

// Traverse the array backward because we insert elements forward.
For ( VaR I = Elems. Length -   1 ; I > =   0 ; I -- ) {
Parent. insertbefore (elems [I], before );
}
} ;

Function Append (parent, ELEM) {
VaR Elems = Checkelem (ELEM );
For ( VaR I =   0 ; I < Elems. length; I ++ ) {
Parent. appendchild (elems [I]);
}
} ;

 

Finally, add two functions:

 

Function Remove (ELEM ){
If (ELEM)
ELEM. parentnode. removechild (ELEM);
}< P>

function Empty (ELEM) {
while (ELEM. firstchild)
remove (ELEM. firstchild);
}