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.
.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.
$(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>EVERDEVEL :: 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>EVERDEVEL :: 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().
Thank you for visiting. If you have any inquiry or explanation of mistakes, please use the comments below.
ALL COMMENTS 0
Sort by
