This article briefly introduces the jquery Mobile and Replication DOM node program implementation, there is a need to learn friends can refer to.
When you do a project, you need the DOM node to move, as in the following code:
Copy Code code as follows:
You need to move the P tag to the DIV tag, and after testing, it's convenient to move the DOM node in jquery:
Copy Code code as follows:
$ (' div '). Append ($ (' P '))
So you can move the P tag to the DIV tag, and don't write this:
Copy Code code as follows:
$ (' div '). Append ($ (' P '). HTML ())
This simply copies the contents of the P tag into the div tag.
If you just copy one to the div tag, the original label remains, so you can write:
Copy Code code as follows:
$ (' div '). Append ($ (' P '). Clone (True))
Cases
Copy Code code as follows:
$ (function () {
$ (". Nm_ul li"). Click (function () {
$ (this). Clone (True). Appendto (". Nm_ul"); Copy the currently clicked node and append it to the <ul> element
})
});
Also, when the clone parameter is set to True, you can copy the event bound by the button to the new button
A parameter true is passed in the Clone () method, meaning that the event that is bound in the element is replicated while copying the element. Therefore, copies of this element also have replication capabilities. If you do not want the event to be replicated, you can write this:
Copy Code code as follows:
$ (' div '). Append ($ (' P '). Clone ())
Moving nodes
Moving one node on a page to another can be jq the internal and external insertion method (Append,appendto,prepend,prependto,after,before,insertafter,insertbefore), You can move the selected node directly by passing it in
Copy Code code as follows:
<button>move me!</button>
<div id= "box" ></div>
Instance
$ ("button"). Click (function () {
$ (this). Appendto ($ ("#box"));
or use append.
$ ("#box"). Append (this);
});
Replication nodes are also one of the most common DOM operations, such as the effects of many shopping sites, where users can buy products not only by clicking the "Select" button below the product, but also by dragging the item by the mouse and placing it in the cart. This product drag function is to use the replication node, the user selected items in the node element copy once, and follow the mouse to move, so as to achieve the shopping effect.
The HTML DOM structure is as follows:
Copy Code code as follows:
<p class= "nm_p" title= "Welcome to Cloud Communities Library" > Welcome to Cloud Habitat Community Library </p>
<ul class= "Nm_ul" >
<li title= ' php Magic ' > easy to understand PHP magic </li>
<li title= ' C Magic ' > easy to understand C magic </li>
<li title= ' JavaScript magic ' > easy to understand JavaScript magic </li>
<li title= ' jquery ' > easy to understand jquery Magic </li>
</ul>
If you need to copy a <li> element after clicking the <li> element, you can use the Clone () method to do it, first to see the effect:
Effect Demo
Welcome to Yun-Habitat Community Library
Easy to understand PHP magic
Easy to understand C magic
Easy to understand JavaScript magic
Easy to understand jquery magic
The jquery code is as follows:
Copy Code code as follows:
$ (function () {
$ (". Nm_ul li"). Click (function () {
$ (this). Clone (True). Appendto (". Nm_ul"); Copy the currently clicked node and append it to the <ul> element
})
});
When you click a random item in the page, the new node for the item appears at the bottom of the list.
After a node is replicated, the new element being copied does not have any behavior. If you need a new element that also has replication capabilities (in this case, click events), you can use the following jquery code:
Copy Code code as follows:
$ ("ul Li"). Click (function () {
$ (this). Clone (True). Appendto ("ul"); Note Parameter true
Can reproduce himself, and his copy also has the same function.
})
