JavaScriptのループ内でコードを印刷するには

Question

私はJavaScriptのループを持っています。私はechoをPHPで使用した場合のように、そこにHTMLコードを表示したいと考えています。

<div class="colorpick"> 
    <script language="javascript"> 
     for (var i = 0; i < 2; i++) { 
     domument.write('<div class="pick" style="background-color:'+ list[i] + '" onclick="hello(this.style.backgroundColor);"></div>'); 
     } 
    </script> 
</div> 

Answer 1

try{ 
    var strContent = ""; 
    for(var i=0; i<2; i++) { 
     strContent += "<div class=\"pick\" style=\"background-color:" + list[i] + "\" onclick=\"hello(this.style.backgroundColor);\"></div>"; 
    } 
    document.write(strContent); 
} catch(ex) { 
    alert(ex); 
} 

例外ハンドラは、他の何かが間違っている場合は、あなたが知っているようにただそこにある：これは私がこれまでにしようとしているものです。

Answer 2

元のコードには誤植がありましたが、これは機能しませんでしたが、jQueryを使用して効率的に行うことができます（質問にはjQというタグが付いています）。リストをループして追加しますHTMLのdivへ - 各divに色分けされたbg-クラスを追加しました。

これにより、自分が持っていたインラインスタイルではなく、divのスタイリングに対する外部CSSアプローチが可能になります。可能ならば、CSSをHTMLから守るほうがずっと良いです。 javascriptと同じです.HTMLから削除し、イベントハンドラを介してスクリプトに追加すると、コード構造が改善されます。

$(document).ready(function(){ 
 
    var str=""; 
 
    var list=["red","green","blue"]; 
 
    
 
    for (i = 0; i < list.length; i++) { 
 
     str += "<div class='pick bg-"+ list[i] +"'>Click Me</div>"; 
 
    } 
 
    
 
    $('.colorpick').append(str); 
 

 
    $('.pick').on('click',function(){alert($(this).css('background-color'))}); 
 

 
})

.bg-red{background:red} 
 
.bg-green{background:green} 
 
.bg-blue{background:blue}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="colorpick"></div>