タグを他のタグの中にいれる方法

append();

タグを他の中に入れることもできます。
したのタグがある場合、

<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>

jQueryを利用して上のソースをしたのように変更することができます。
asimo, honda, iphone12, macbook airが　ex_wrapの中にありますね。

<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">iphone12</p>
  <p class="ex_p">macbook air</p>
</div>

最初のソースはタグが同じラインにありますね。

２番目のソースはasimo, honda, iphone12, macbook airが　ex_wrapの中にありますね。

これを可能にするのはappend()です。 ^^

How To use append()

parentになるタグ.append(子供になるタグ);

$('.ex_wrap').append('.ex_p');

上のソースはclass属性のバリューがex_pなタグがex_wrapの中に入るソースです。

ではやって見ましょう。

CSS

.ex_p{border:5px solid yellow}
.ex_wrap p{clear:both;float:left;margin-left:20px;border:0}

Aボックス

asimo

honda

iphone12

macbook air

上のボックスをみるとasimo, honda, iphone12, macbook airがボックスの中にあるAボックスの外にありますが、
これを中に入れて見ましょう。　

次のjQueryソースを見てください。

jQuery

$(function(){
	var ex_wrap = $('.ex_wrap');
	var ex_p = $('.ex_p');
  ex_wrap.append(ex_p);　// ex_pをex_wrapの中に入れる。
});

asimo

honda

iphone5

macbook air

上のようになります。ではやってみましょうね。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>COREASUR :: jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script>
$(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">iphone12</p>
    <p class="ex_p">macbook air</p>
</body>
</html>

結果をみるとasimo, honda, iphone12, macbook airがボックスの中にありますね。

appendToについても調べましょう。appendと機能は同じですが、順番が逆です。

子供になるタグ.appendTo(parentになるタグ);

上のソースはしたのように書けますね。

$(function(){
    var ex_wrap = $('.ex_wrap');
    var ex_p = $('.ex_p');
    ex_p.appendTo(ex_wrap);
});

ではやってみましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>COREASUR :: jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script>
$(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>

結果は同じですね。こうappend(),appendTo()を使います。＾＾

ありがとうございます。