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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

12553閲覧

html内への要素の追加が出来ない

teriyaki398

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2015/11/17 14:53

編集2015/11/17 14:55

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だけで書いた場合は上手くいくのですが、原因が分からず困っています。
本当に初歩的な質問で申し訳ありませんが、回答よろしくお願いします。

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

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

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

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

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

guest

回答3

0

$(' <img src="picture/img01.jpg" alt="" />').append(div1);

セレクタと引数が逆だと思います。

javascript

1div1.append(' <img src="picture/img01.jpg" alt="" />');

のようにしてみてください。

投稿2015/11/17 15:02

aKusano

総合スコア3763

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

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

teriyaki398

2015/11/17 15:13 編集

回答ありがとうございます appendとappendToを間違えて書いていました
guest

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

blackonyx

総合スコア354

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

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

teriyaki398

2015/11/17 15:22

append と appendTo が一緒に出てきたので混同してました……汗 appendToでも上手くいきました!ありがとうございます!
guest

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
Ken.sakanakana

総合スコア1768

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

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

teriyaki398

2015/11/17 15:13 編集

上手く表示できました……! 本当に有難うございます。
Ken.sakanakana

2015/11/17 15:18

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

2015/11/17 15:21

セレクタの部分を変数にしても上手く動きました! 丁寧にありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問