Question

I am trying to convert this piece of html code to javascript so that I can dynamically add it to the <div> in the html code.

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>

I need to have this code converted into javascript. I tried doing it like this but it doesn’t seem to work:

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

You did never append the div1 element.

Some other issues:

• className is a property, not an attribute. If you want to set the attribute, use a plain class instead.

• Your h2 element is receiving a name, id and value attribute. These attributes make no sense. Did you mean:

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

• Finally, you haven’t declared the variables. Some browsers refuse to assign values to non-existent variables. Variables are declared by the var keyword:

  var div1 = ...