Q&A
append と appendTo が一緒に出てきたので混同してました……汗
appendToでも上手くいきました！ありがとうございます！
javascript及びjQuery初心者です。テキストに沿ってコードを書く練習をしているのですが、どうしても上手く表示されない箇所があり、困っています。
html
1 <body> 2 <div id="div1"></div> 3 </body>
javascript
1$(function(){ 2 var div1 = $('#div1'); 3 $(' <img src="picture/img01.jpg" alt="" />').append(div1); 4}); 5
html本体のbodyタグにdiv1というidを付けて、appendを用いて画面に表示しようとしているのですが、何も表示されません。
html
1 <body> 2 <div id="div1"> 3 <img src="picture/img01.jpg" alt="" /> 4 </div> 5 </body>
このようにHTMLだけで書いた場合は上手くいくのですが、原因が分からず困っています。
本当に初歩的な質問で申し訳ありませんが、回答よろしくお願いします。
回答3件
0
$(' <img src="picture/img01.jpg" alt="" />').append(div1);
セレクタと引数が逆だと思います。
javascript
1div1.append(' <img src="picture/img01.jpg" alt="" />');
のようにしてみてください。
投稿2015/11/17 15:02
総合スコア3763
0
appendの場合はターゲットセレクタとHTMLコンテンツの位置が逆です。
$("ターゲットセレクタ").append("HTMLコンテンツ")
です。
javascript
1$(function(){ 2 var div1 = $('#div1'); 3 $(div1).append(' <img src="picture/img01.jpg" alt="" />'); 4});
また、質問者様の提示されたコードでの指定順に近いのは、
$("HTMLコンテンツ").appendTo("ターゲットセレクタ")
で、以下のようになります。
javascript
1$(function(){ 2 var div1 = $('#div1'); 3 $(' <img src="picture/img01.jpg" alt="" />').appendTo(div1); 4});
投稿2015/11/17 15:15
総合スコア354
0
ベストアンサー
JavaScriptの部分を一度、以下のように変更して再読み込みしてもらっても良いですか？
HTML
1$(function(){ 2 $('#div1').append('<img src="picture/img01.jpg" alt="" />'); 3});
あと、jQueryは読み込めていますか？
HTML
1<head> 2<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 3</head>
投稿2015/11/17 15:00
編集2015/11/17 15:02
総合スコア1768
上手く表示できました……！
本当に有難うございます。
aKusanoさまが、おっしゃる通り、セレクタ $( ココ ) と、引数 append( ココ ) が逆になっています。セレクタの部分を変数にするかどうかは、お任せですが、
var div1 = jQuery('#div1');
とすると、
div1.append('<img src="picture/img01.jpg" alt="" />');
と、できるかもしれません。すみません試してません。
ーーー
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<script>
$(function(){
var div1 = jQuery('#div1');
div1.append('<img src="picture/img01.jpg" alt="" />');
});
</script>
<div id="div1">AAA</div>
</body></html>
ーーー
セレクタの部分を変数にしても上手く動きました！
丁寧にありがとうございます！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/11/17 15:13 編集