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

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

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

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

jQuery

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

Q&A

解決済

1回答

5038閲覧

量の多いHTMLをappendする際のテクニック

K_9301

総合スコア69

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/09/08 06:57

#要件
ボタンクリックで<body>にhtml要素を追加したい。
ただ結構量が多いので、楽にスマートに各アイデアを募集したいです

#書いているJS。もっとスマートは方法を、、

JS

1//変数にHTMLを+していきます。ココらへんをもっと簡単にかけないものか、、 2var data = "" 3 data += "<div class='test'>hoge</div>" 4 data += "<div>hoge</div>" 5 data += "<div>hoge</div>" 6 data += "<div>hoge</div>" 7 data += "<div>hoge</div>" 8 data += "<div>hoge</div>" 9 data += "<div>hoge</div>" 10 data += "<div>hoge</div>" 11 data += "</div>" 12 13//ボタンをクリックしたらbodyに上記dataをappendする 14btn.onclick = function(){ 15 $( "body" ).append( data ) 16} 17 18

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

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

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

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

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

maisumakun

2017/09/08 06:59

追加するHTMLは「いつも同じもの」なのか否か、あるいは「ループで生成できるようなパターンがある」のかそうでないのかなど、実際の状況に即して簡略化できるかどうかが決まります。
m.ts10806

2017/09/08 07:02

追加したいHTMLのサンプルをなるべく具体的にお願いします。それによりどのようなパターンが使えるかなどが決まります。これだけでは<div></div>だけ保持してforで追加したい個数分ループ、、、くらいしか出ません。
x_x

2017/09/08 07:14

hogeの出所は何でしょうか?
K_9301

2017/09/08 07:22

コメント有難うございます。まず、HTMLは規則性はありません。「いつも同じもの」でもなく、divが何個もつづく、と言った感じでもありません。内容はコロコロかわります、、
m.ts10806

2017/09/08 07:25

ではやはり「場合による」としか。規則性がないのであればご提示のように1つ1つ書いていくしかないように思います。
x_x

2017/09/11 07:40

出所について回答いただけないのですが、規則性がない=ランダムと思ってよろしいのでしょうか?
guest

回答1

0

ベストアンサー

手を抜くならバックスラッシュで改行をふくむ文字列を指定できます
ただし、古いブラウザは対応していないのでちょっとした工夫が必要。

javascript

1window.onload=function(){ 2var data = ` 3<div class='test'> 4<div>hoge</div> 5<div>hoge</div> 6<div>hoge</div> 7<div>hoge</div> 8<div>hoge</div> 9<div>hoge</div> 10<div>hoge</div> 11<div>hoge</div> 12</div>`; 13 document.querySelector("#btn").addEventListener('click',function(){ 14 console.log(data); 15}); 16}

HTML

1<input type="button" id="btn" value="check">

追記

よくみるとjQueryっぽいので、こうでしょうか?

javascript

1$(function(){ 2var data = ` 3<div class='test'> 4<div>hoge</div> 5<div>hoge</div> 6<div>hoge</div> 7<div>hoge</div> 8<div>hoge</div> 9<div>hoge</div> 10<div>hoge</div> 11<div>hoge</div> 12</div>`; 13 $("#btn").on('click',function(){ 14 $("body").append($(data)); 15 }); 16});

投稿2017/09/08 07:40

編集2017/09/08 07:49
yambejp

総合スコア116119

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

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

K_9301

2017/09/12 23:55

有難うございます、行けそうです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.40%

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

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

質問する

関連した質問