Move tag
append();
I will explain it in source because it is too hard for me to explain.
<div class="ex_wrap" style="width:200px;height:100px;border:1px solid #000"></div> <p>asimo</p> <p>honda</p> <p>iphone5</p> <p>macbook air</p>
You can use jQuery to change the source above to: The source of the actual editor is not like this, but you can make it like this.
<div class="ex_wrap" style="width:200px;height:100px;border:1px solid #000"> <p class="ex_p">asimo</p> <p class="ex_p">honda</p> <p class="ex_p">iphone5</p> <p class="ex_p">macbook air</p> </div>
The first source is div tag and p tag on the same line.
The second source contains the p tags inside the div tag.
It is append() that functions to put any tag into any tag. ^^
How To use append()
Target of eating.append(Target to be eaten);
That is what happened.
$('.ex_wrap').append('.ex_p');
Then, you may not know this well, so let's check it through the example to make it easier to understand.
CSS
.ex_p{border:5px solid yellow} .ex_wrap p{clear:both;float:left;margin-left:20px;border:0}
asimo
honda
iphone5
macbook air
In the example above, the ex_p tags are not in ex_wrap yet.
Let's take a look at the following jQuery.
jQuery
$(function(){ var ex_wrap = $('.ex_wrap'); var ex_p = $('.ex_p'); ex_wrap.append(ex_p); });
asimo
honda
iphone5
macbook air
As above, asimo honda iphone5 macbook air enters ex_wrap.
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>COREASUR :: jQuery Course</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script> <script type="text/javascript"> $(function(){ var ex_wrap = $('.ex_wrap'); var ex_p = $('.ex_p'); ex_wrap.append(ex_p); }); </script> <style> .ex_wrap{float:left;border:1px solid #000000} .ex_wrap p{clear:both;float:left;margin-left:20px;border:0} </style> </head> <body> <div class="ex_wrap"></div> <p class="ex_p">asimo</p> <p class="ex_p">honda</p> <p class="ex_p">iphone5</p> <p class="ex_p">macbook air</p> </body> </html>
Now let's look at appendTo().
You can think of the reverse order.
Target to be eaten.appendTo(Target of eating);
If you edit the source above
$(function(){ var ex_wrap = $('.ex_wrap'); var ex_p = $('.ex_p'); ex_p.appendTo(ex_wrap); }); In other words, ex_p works to ex_wrap
Then practice with an example.
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>COREASUR :: jQuery Course</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script> <script type="text/javascript"> $(function(){ var ex_wrap = $('.ex_wrap'); var ex_p = $('.ex_p'); ex_p.appendTo(ex_wrap); }); </script> <style> .ex_wrap{float:left;border:1px solid #000000} .ex_wrap p{clear:both;float:left;margin-left:20px;border:0} </style> </head> <body> <div class="ex_wrap"></div> <p class="ex_p">asimo</p> <p class="ex_p">honda</p> <p class="ex_p">iphone5</p> <p class="ex_p">macbook air</p> </body> </html>
This concludes the tutorial on append() and appendTo(). ^^
The next lesson will be about val(), empty(), and remove().