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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

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

jQuery

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

Q&A

解決済

2回答

7269閲覧

JavaScriptで読み込んだHTMLの一部を書き換えてBodyに追加したい

fennec3

総合スコア7

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

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

jQuery

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

1グッド

2クリップ

投稿2017/11/12 05:06

###前提・実現したいこと
JavaScript初心者です。
Twitterのクライアントアプリを作っているのですが、
外部に用意したツイート表示用のHTMLをJavaScript(jQuery)で読み込んで、
名前・アイコン・テキスト(本文)の部分をAPIで取得したものに差し替えてから、
Bodyの指定した位置に挿入したいです。

例えば以下のような感じです。
ツイート表示用のHTMLは"template.html"、
名前・テキストのタグのIDはそれぞれ "tweet-name", "tweet-text" です。

HTML

1<!DOCTYPE html> 2 <head></head> 3 <body> 4 <div id="tweets-space"></div> <!-- ここに挿入したい --> 5 <script src="/node_modules/jquery/dist/jquery.min.js"></script> 6 <script> 7 function InsertTweets(tweets /*取得したツイートのリスト*/) { 8 let template = $('<div>').load("template.html"); 9 for(let i = 0; i < tweets.length; ++i) { 10 tweet_element = template.clone(); 11 // 名前・テキストを差し替える(ここが分からない) 12 tweet_element.find("#tweet-name").text(tweets[i].name) 13 tweet_element.find("#tweet-text").text(tweets[i].text) 14 $('#tweets-space').append(tweet_element[0]); 15 } 16 } 17 </script> 18 </body> 19</html>

###発生している問題
外部のHTMLを $('#hoge').load("fuga.html"); で読み込むところまでは出来たのですが、
読み込んだHTMLの特定の要素の属性・textを書き換える方法が分かりません。
そもそもforの中で要素をappendしても1つしか挿入されません。
そしてcloneしたものをconsole.log(cloned[0])で表示しても中身が空っぽのdivタグです。

APIで取得するところまではできていて、あとはHTMLで表示させるだけなので、
jQueryを使わない方法でもいいのでご教示下さい。よろしくお願いします。m(_ _)m

###補足情報(言語/FW/ツール等のバージョンなど)
jQueryのバージョンは3.2.1です。
webサーバーはFlask、クライアント側はelectronです。

shunsuke5468👍を押しています

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

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

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

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

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

guest

回答2

0

ベストアンサー

http://api.jquery.com/load/
更にjQuery.loadのソースコードを見るとAjaxという非同期通信が使われている。

新たにHTMLリクエスト等を発射した場合、
リクエストの結果が返ってくるまで何の動作も出来ずに待ちぼうけになってしまう。
通信やファイルの読み書きといった結果が反映されるまで遅い処理を実行する時は、
通信結果を待たずに次の行を実行するという動作をする。

「えー、それじゃ困る、通信終わってから決めた処理をして欲しい」というケースはもちろんあるよね。
残りの処理を関数化して引数として渡しておき、「通信終わったらこの関数を実行してね」とお願いするのが慣習


さて上記前提条件を元にコードをみていこう。
リファレンスを見ると下記のような記述がある。

JavaScript

1$( "#success" ).load( "/not-here.php", function( response, status, xhr ) { 2 if ( status == "error" ) { 3 var msg = "Sorry but there was an error: "; 4 $( "#error" ).html( msg + xhr.status + " " + xhr.statusText ); 5 } 6});

loadメソッドの第2引数に、やりたい処理を関数に包んで定義してある。
これと同じことをやろう。

JavaScript

1let template = $('<div>').load("template.html"); 2for(let i = 0; i < tweets.length; ++i) { 3 tweet_element = template.clone(); 4 // 名前・テキストを差し替える(ここが分からない) 5 tweet_element.find("#tweet-name").text(tweets[i].name) 6 tweet_element.find("#tweet-text").text(tweets[i].text) 7 $('#tweets-space').append(tweet_element[0]); 8}

こうではなく、こうだ!

JavaScript

1let template = $('<div>').load("template.html", function (response, status, xhr) { 2 for(let i = 0; i < tweets.length; ++i) { 3 tweet_element = template.clone(); 4 // 名前・テキストを差し替える(ここが分からない) 5 tweet_element.find("#tweet-name").text(tweets[i].name) 6 tweet_element.find("#tweet-text").text(tweets[i].text) 7 $('#tweets-space').append(tweet_element[0]); 8 } 9}

一旦これで様子を見よう。
このように処理を変えた事で、tweet_element = template.clone();の行の実行タイミングがAjax通信完了後に変わる。
つまり、関数に包んだだけで成功している可能性もあるわけだね。

投稿2017/11/12 05:39

miyabi-sun

総合スコア21158

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

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

fennec3

2017/11/12 06:05

できました!!! 非同期だからloadが終わる前に下の処理に行ってたんですね! コードを書き換えたら上手く動くようになりました! 素早い回答ありがとうございます。。
guest

0

.load() は取得結果をそのまま返すのではなく、非同期で通信した後、対象DOMに取得結果を格納します。

JavaScript

1$( '#result' ).load( 'test.html', function() { 2 console.log( 'A' ); 3 // この部分が実行されるまで$( '#result' )には'test.html'の内容が入っていない 4} ); 5console.log( 'B' ); 6// B ⇒ A の順で表示される

.get() でとってコールバック関数内で $('#tweets-space').append(); をするほうが良いでしょう。


【.load() | jQuery API Documentation】
http://api.jquery.com/load/

【.load() | jQuery 1.9 日本語リファレンス | js STUDIO】
http://js.studio-kingdom.com/jquery/ajax/load

【jQuery load() を使って別のページの見出しを表示する | Web Design Leaves】
http://www.webdesignleaves.com/wp/jquery/1593/

【jQuery「.load( )」で簡単にhtmlパーツをインクルードする方法|プラカンブログ | プラスデザインカンパニー【大阪・東京 ホームページ・WEB制作】】
http://www.plusdesign.co.jp/blog/?p=4832

投稿2017/11/12 05:34

編集2017/11/12 05:40
kei344

総合スコア69364

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

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

fennec3

2017/11/12 06:09 編集

回答ありがとうございます! 第二引数でコールバック関数を指定しないといけないんですね。 色々記事を漁ってたんですが見落としていたかもしれないです。。 DOMというのがよくわかっていないんですが、clone後のオブジェクトが空の理由を調べていたら DOMに格納されていないからというのを見ました。こういうことだったんですね。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問