Q&A
追加するHTMLは「いつも同じもの」なのか否か、あるいは「ループで生成できるようなパターンがある」のかそうでないのかなど、実際の状況に即して簡略化できるかどうかが決まります。
#要件
ボタンクリックで<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
追加したいHTMLのサンプルをなるべく具体的にお願いします。それによりどのようなパターンが使えるかなどが決まります。これだけでは<div></div>だけ保持してforで追加したい個数分ループ、、、くらいしか出ません。
hogeの出所は何でしょうか？
コメント有難うございます。まず、HTMLは規則性はありません。「いつも同じもの」でもなく、divが何個もつづく、と言った感じでもありません。内容はコロコロかわります、、
ではやはり「場合による」としか。規則性がないのであればご提示のように1つ1つ書いていくしかないように思います。
出所について回答いただけないのですが、規則性がない＝ランダムと思ってよろしいのでしょうか？
回答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
総合スコア118164
あなたの回答
tips
プレビュー
