jquery inside the DOM operation (find, create, add, delete node)

One: Create element node (add)
Create an element node and add nodes as child nodes of the element to the DOM tree

1.append (): Adding elements under an element
Usage: $ ("id"). Append ("defined node"); For example: var li1 = $ ("<li> Orange </li>");
Add attribute node: $ ("<li class= ' Test ' > Strawberry </li>")

2.appendTo (): Add elements to an element
Usage: $ (LI3). AppendTo ("#box1");

3.prepend (): Add a node to the top of the element

4.prependTo (): Adds a node to the top of the specified element
Usage: $ (LI3). Prependto ("#box1");

5.before (): Adds a node to the front (outer) of the specified element
Usage: $ ("#div1"). before (DIV1);

6.insertBefore (): Adds a new element to the sibling element of the target element before the target node

7.after (): Adds a node to the back of the specified element (outer layer)
Usage: $ ("#div1"). After (DIV1);

8.insertAfer (): Adds the newly created element to the target node behind as a sibling element
Usage: $ (Element). InsertAfter ("Target Node")

Two: Delete node

Remove (): Removes all occurrences of the element, this method can delete all child nodes of the element
Usage: $ (Element). Remove ();

Empty (): empty in principle, it is not a delete element, it just empties the node, it can empty all the child nodes of the specified element
Usage: $ (Element). empty ();

Three: Modify node (replace node, parcel node, copy node)

Wrap node: Wrap () Warpall ()
Usage: $ (Element). Wrap ("HTML")
Note: The Wrap () method is a separate package for all elements, while Warpall () wraps all the matching elements with an element

Copy node: Clone (True) completely copies an element:trueCopying an element also replicates its behavior, without the need for a copy of the behavior when no parameters are added
Usage: $ (Element). Clone (True);

Four: Property operations (Get Properties, set properties, delete attributes)

Get Properties: 1.var $para =$ ("P");//Get <p> node
2.varp_txt= $para. attr ("title");//Get <p> element node properties

Set properties: 1.$ ("P"). attr ("title", "title");//Set individual property values
2.$ ("P"). attr ({"title": "Title", "Class": "Highlignt"});//Set multiple properties at once for the same element

Delete attribute: Removeattr ()
Usage: $ ("P"). Removeattr ("title");//delete <p> element's attribute ' title '

V: Style action (get style, set style, append style, remove style, toggle style, determine whether there is a style)

Get style and set style: attr ()
Usage: 1.var p_class=$ ("P"). attr ("class");//Get <p> element's class
2.$ ("P"). attr ("Class", "high");//Set <p> element's class is "high"

Append style: AddClass ()
Usage: $ ("P"). addclass ("Anthor");//Append to <p> element "Anthor" class

Removal style: Removeclass ()
Usage: $ ("P"). Removeclass ("Anthor");//Remove the class with the value "Anthor" in the <p> element

Remove style: Toggleclass () (toggle, add and delete)
Usage: $ ("P"). Toggleclass ("High");//Repeat Switch <p> the class named "High" in the element

Determine if there is a style: Hasclass ()
Usage: $ ("P"). Hasclass ("High");//Determines whether a class with a value of "Anthor" exists in the <p> element
$ ("P"). Hasclass ("high") = = = = $ ("P"). Is (". High"); Is ("." +class)

According to the knowledge point of this chapter, made a simple puzzle, such as:

The workaround is as follows: (Method one)

Code:

<script type= "Text/javascript" >        $(function ()        {            functionse () {//defines the ID of a blank TD                varTdid = 0; //the ID of the TD that gets the current blank$ ("tr TD"). each (function () {                    //Alert ($ (this). attr ("id"));                    //determine if the TD has child elements                    if($( This). Children (). Length <= 0) {Tdid= parseint ($ ( This). attr ("id"));                }                }); returnTdid; }                        //Click events for pictures$ ("img"). Click (function ()            {                //get the ID of the current click image                varImgid = $ ( This). Parent (). attr ("id"); Imgid=parseint (Imgid); varTdid = SE ();//ID of Blank TD                //alert (imgid+ "" +tdid)                //determine if there is a blank TD around the currently clicked image, and if so, move the picture to a blank position                if((imgId-1) = Tdid) && ((Imgid + 1)! = Tdid) && ((Imgid + 3)! = Tdid) && ((imgId-3)! =Tdid)) {Alert ("The picture cannot be moved"); }                Else                {                    if((tdid% 3 = = 1 && imgid% 3 = = 0) | | (tdid% 3 = = 0 && imgid% 3 = = 1) {alert ("The picture cannot be moved"); }                    Else                    {                        $( This). AppendTo ("td[id=" + Tdid + "]");        }                }            });    }); </script>

Method Two:

Code:

$(function() {alert ($ ("#1"). width ()); $("TD"). Click (function () {                varID = $ ( This). Prop ("id");//The ID of this TD that gets the current click                if(parseint (ID) + 3 < && $ ("td[id=" + (parseint (ID) + 3) + "]"). Children (). Length = = 0) {//Move Down                    $( This). FIND ("img"). AppendTo ($ ("td[id=" + (parseint (ID) + 3) + "]")); }                Else if(parseint (ID)% 3! = 0 && $ ("td[id=" + (parseint (ID) + 1) + "]"). Children (). Length = = 0) {//Right                    $( This). FIND ("img"). AppendTo ($ ("td[id=" + (parseint (ID) + 1) + "]")); }                Else if(parseint (ID)% 3! = 1 && $ ("td[id=" + (parseint (ID)-1) + "]"). Children (). Length = = 0) {//left$( This). FIND ("img"). AppendTo ($ ("td[id=" + (parseint (ID)-1) + "]")); }                Else if(parseint (ID)-3 > 0 && $ ("td[id=" + (parseint (ID)-3) + "]"). Children (). Length = = 0) {//Upward                    $( This). FIND ("img"). AppendTo ($ ("td[id=" + (parseint (ID)-3) + "]"));    }            })        }); </script>

Dom operations in jquery (Find, create, add, delete nodes)