QUIZGUM

Coding Class

Quizgum : append

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>quizgum :: 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>quizgum :: 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().