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

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

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

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

jQuery

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

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

2回答

5056閲覧

HTMLを動的に追加したいのですがうまくいきません

t33

総合スコア33

JavaScript

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

jQuery

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

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2016/11/03 04:17

【質問内容】
monacaのリスト項目を動的に追加したく色々試してみたのですが全く追加出来ませんでした。
本当に困っています。どなたかご教授頂けないでしょうか。
初心者で大変申し訳ないのですが、何卒よろしくお願い致します。

index.html

javascript

1$('#listParent').append('<ons-list-item modifier="tappable" id="list6">Tap Me</ons-list-item>');

read.html

HTML

1<ons-page> 2 <ons-toolbar> 3 <div class="left"><ons-back-button>Back</ons-back-button></div> 4 <div class="center">ページ1</div> 5 </ons-toolbar> 6 7 <ons-scroller> 8 <ons-list> 9 <ons-list-header>リスト</ons-list-header> 10 </ons-list> 11 <ons-list id="listParent"> 12 <div class="test"> 13 <ons-list-item modifier="tappable" id="list0">Tap Me</ons-list-item> 14 <ons-list-item modifier="tappable" id="list1">Tap Me</ons-list-item> 15 <ons-list-item modifier="tappable" id="list2">Tap Me</ons-list-item> 16 <ons-list-item modifier="tappable" id="list3">Tap Me</ons-list-item> 17 <ons-list-item modifier="tappable" id="list4">Tap Me</ons-list-item> 18 <ons-list-item modifier="tappable" id="list5">Tap Me</ons-list-item> 19 </div> 20 </ons-list> 21 </ons-scroller> 22</ons-page>

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

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

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

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

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

guest

回答2

0

<ons-list-item modifier="tappable" id="list5">Tap Me</ons-list-item>
の下に追記していきたいのであれば

$('#listParent').append('<ons-list-item modifier="tappable" id="list6">Tap Me</ons-list-item>');

ではなくて

$('#listParent div').append('<ons-list-item modifier="tappable" id="list6">Tap Me</ons-list-item>');

のようする。(セレクタの指定が違う)

全く追加出来ませんでした。

との事ですが、上記のセレクタを間違っていても

<ons-list id="listParent"> <div class="test"> <ons-list-item modifier="tappable" id="list0">Tap Me</ons-list-item> <ons-list-item modifier="tappable" id="list1">Tap Me</ons-list-item> <ons-list-item modifier="tappable" id="list2">Tap Me</ons-list-item> <ons-list-item modifier="tappable" id="list3">Tap Me</ons-list-item> <ons-list-item modifier="tappable" id="list4">Tap Me</ons-list-item> <ons-list-item modifier="tappable" id="list5">Tap Me</ons-list-item> </div> <ons-list-item modifier="tappable" id="list6">Tap Me</ons-list-item> </ons-list>

こんな感じには場所がおかしいけど追加されるはずですが、
このjqueryはなにかをトリガにして実行されてますか?

たとえばボタンを押したら追加されるようにするというのであれば

<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> </head> 〜省略〜 <button id='insert'>click</button> <script> $(function() { $("#insert").click(function(){ $('#listParent div').append('<ons-list-item modifier="tappable" id="list6">Tap Me</ons-list-item>'); }); }); </script>

のような方法で

投稿2016/11/03 05:00

編集2016/11/03 05:03
hiim

総合スコア1689

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

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

t33

2016/11/03 09:52

このjqueryはなにかをトリガにして実行されてますか? ⇒していないです。index.html内の<Script>内に記述していました。  お教え頂きました内容で動かしたのですが、やはり追加出来ませんでした。 ポップアップ機能を利用して、ポップアップが押されたときにページ遷移(index.html⇒read.html)しているのですが、read.htmlを表示する前にindex.htmlにて命令を記載しているのが動かない原因なのでしょうか。。 現状のソースでは、 1: index.htmlが読込まれ ($('#listParent div').append('<ons-list-item modifier="tappable" id="list6">Tap Me</ons-list-item>');を実行する。 2:ポップアップでindex.htmlからread.htmlにページ遷移し、read.htmlに書かれたリストが表示される。 という風になっています。 そこでread.htmlを表示しているときに「appendを実行する」とどうなるのかと思い試してみました。 結果と致しましては、表示はされたのですが、期待通りの動作にはなりませんでした。 __________________________________ Tap Me __________________________________ Tap Me __________________________________ Tap Me __________________________________ Tap Me __________________________________ Tap Me __________________________________ Tap Me __________________________________ Tap Me __________________________________ ↑最後のリストのところをこのようにしたいのですが __________________________________ Tap Me __________________________________ Tap Me __________________________________ Tap Me __________________________________ Tap Me __________________________________ Tap Me __________________________________ Tap Me __________________________________ Tap Me____________________________ ↑最後のところがうまく表現できていませんが、リストの幅が狭くなってしまいました。 又複数追加すると __________________________ Tap Me Tap Me Tap Me________ のように横に並んでしまいます。。
退会済みユーザー

退会済みユーザー

2016/11/03 09:59

それは 追加した後にフレームワークでHTML化してないから不明なタグとしてインライン要素化している。
t33

2016/11/03 10:08

なるほど。ちなみになのですが解決方法はあるのでしょうか。。
guest

0

自己解決

hiimさん、xa051さんお教え頂きまして本当にありがとうございます。
お二人のおかげで自己解決致しました。

ons.compile(element);
で、再HTML化することにより解決出来ました。

自分が書き方をミスしているのかもしれませんが、appendだとうまくいかなかった為、innerHTMLを使用しました。

javascript

1myNavigator.on('postpush', function(event){ 2 element = document.getElementById("test"); 3 element.innerHTML='<ons-list-item modifier="tappable" id="list0">Tap Me</ons-list-item>'; 4 ons.compile(element); 5---});

投稿2016/11/03 10:56

編集2016/11/03 10:59
t33

総合スコア33

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問