#要件
ボタンクリックで<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

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

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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});