質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

767閲覧

jqueryのappendToについて

g___

総合スコア16

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/11/06 08:20

HTML

1<div class="test"> 2 3</div>

このようなHTMLに以下のjs

js

1var test1 = $('<div class="hoge"></div>'); 2test1.appendTo($(".test")); 3test1.appendTo($(".test"));

を実行すると

HTML

1<div class="test"> 2 <div class="hoge"></div> 3</div>

になります。

望んでいる結果は

HTML

1<div class="test"> 2 <div class="hoge"></div> 3 <div class="hoge"></div> 4</div>

なのですがなぜ一つしか生成されないんでしょうか?

下記のようなコードは正常に動きます

js

1var test1 = $('<div class="hoge"></div>'); 2var test2 = $('<div class="fuga"></div>'); 3test1.appendTo($(".test")); 4test2.appendTo($(".test"));

結果は

HTML

1<div class="test"> 2 <div class="hoge"></div> 3 <div class=“fuga”></div> 4</div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

.appendToは、すでにDOMに入っているノードに適用すると、移動という意味になります。

.cloneしてから.appendToする、あるいはHTMLを2回appendするなど、別な手段が必要になります。

投稿2018/11/06 08:28

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

appendやappendToの基本は、「なければ追加あれば移動」ってことだから
ただclassなどを利用した複数要素への投入は一番最後の処理だけ移動という
ちょっと分かりづらい処理。

javascrpit

1<script> 2$(function(){ 3var test1 = $('<div class="hoge">hoge</div>'); 4test1.appendTo($(".test")); 5test1.appendTo($(".test")); 6test1.appendTo($(".test")); 7}); 8</script> 9<div class="test">test1</div> 10<div class="test">test2</div> 11<div class="test">test3</div>

※test1と2は3つずつ投入されて、test3は移動なので常に1つ

常に追加するなら、作ったtest1のインスタンスをcloneしてappendします

javascrpit

1<script> 2$(function(){ 3var test1 = $('<div class="hoge">hoge</div>'); 4test1.clone().appendTo($(".test")); 5test1.clone().appendTo($(".test")); 6test1.clone().appendTo($(".test")); 7}); 8</script> 9<div class="test">test</div> 10<div class="test">test</div> 11<div class="test">test</div>

投稿2018/11/06 08:34

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

var test1 = $('<div class="hoge"></div>');

これがdiv.hogeというオブジェクトそのものだからです(表現が正しくないかもしれませんが)
幾つか追加したいならforなどで回してその都度新しく作ったオブジェクトで追加していくと良いです。

js

1$(function(){ 2 for(var i = 0;i<2;i++){ 3 var test1 = $('<div class="hoge"></div>'); 4 test1.appendTo($(".test")); 5 } 6}); 7

投稿2018/11/06 08:28

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問