ダイナミックな入力のためにhtmlコードをjavascriptに変換する

Question

このhtmlコードをjavascriptに変換して、htmlコードの<div>に動的に追加できるようにしようとしています。

The html code is 
<img src="images/bg_fav.png" alt="" width="199" height="199" class="circle"/> 
<a href="#" class="icon"></a> 
<h2>Filename</h2> 
<ul> 
<li><a href="#">Add</a></li> 
</ul> 

私はこのコードをjavascriptに変換する必要があります。私はこのようにそれをやってみましたが、動作していないよう：

div1 = document.getElementById('div1'); 
a = document.createElement('img'); 
a.setAttribute('src','images/bg_shop.png'); 
a.setAttribute('alt',''); 
a.setAttribute('width','199'); 
a.setAttribute('height','199'); 
a.setAttribute('className','circle'); 

b=document.createElement('a'); 
b.setAttribute('className','icon'); 

c=document.createElement('h2'); 
c.value="filename"; 
c.name="filename"; 
c.id ="filename"; 

d=document.createElement('ul'); 
d.innerHTML="<li><a href='#'>add</a></li>" 

div1.appendChild(a); 
div1.appendChild(b); 
div1.appendChild(c); 
div1.appendChild(d); 

Answer 1

div1要素を決して追加しませんでした。

他のいくつかの問題：

• classNameは財産ではなく、属性です。属性を設定する場合は、代わりに平文classを使用してください。

• 要素は、name,idおよびvalue属性を受け取ります。これらの属性は意味をなさない。あなたはどういう意味ですか：

  h2.textContent = "filename"; //innerText for IE 
  

• 最後に、変数を宣言していません。一部のブラウザは、存在しない変数に値を割り当てることを拒否します。あなたは新しい変数:)

  divがdiv1のIDですでに存在している提供する私のためにうまく動作

  を宣言するときvarを使用してください

  var div1 = ... 
  

Answer 2

構文はどちらかである：

a.className = "circle"; 

OR

a.setAttribute("class","circle"); 

決してミックスと-一致。

aタグのhref属性の設定も省略しています。

なぜh2にvalue,またはidを設定していますか？ <h2 value="filename" name="filename" id="filename" />が表示されますか？もちろん違います。 c.innerHTML = "Filename";または「適切な」方法を使用してください：c.appendChild(document.createTextNode("Filename"));

Answer 3

：変数はvarキーワードによって宣言されています。

See this fiddle

けれどもまた、ロブとKolinkは、あなただけの必要なHTMLコードの文字列を作成し、HTMLとそれを追加することができるなど

Answer 4

属性/クラスのあなたの設定について述べてきたものに注意してください親divのプロパティ。これは単純なテンプレートであり、ほとんどの場合かなりうまく動作します。

実行時に一部のプロパティを編集する必要がある場合にのみ、取得しているアプローチを取る必要があります。静的コードの場合、そのような複雑なアプローチをとる必要はありません。

function htmlToBeRendered() { 
    var html = 
     "<img src=\"images\\bg_fav.png\\" alt=\"\" width=\"199\" height=\"199\" class=\"circle\"/>" + 
     "<a href=\"#\" class=\"icon\"></a>" + 
     "<h2>Filename</h2>" + 
     "<ul>" + 
      "<li><a href=\"#\">Add</a></li>" + 
     "</ul>"; 
    return html; 
}; 

Answer 5

はあなたがデバッグするhttp://getfirebug.com/のような開発ツールを使用してみましたか？あなたのページにID「div1」の要素はありますか？