Convert html code to javascript for dynamic entry

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 = ... 

Answer 2

The syntax is either:

a.className = "circle";

OR

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

Never mix-and-match.

You're also omitting setting the href attribute of your a tag.

And why are you setting value , name or id on your h2 ? Do you see <h2 value="filename" name="filename" id="filename" /> ? Of course not. Either use c.innerHTML = "Filename"; or the "proper" way: c.appendChild(document.createTextNode("Filename"));

Answer 3

Please use var when you declare a new variable :)

Works ok for me providing there is already a div with id of div1 .

See this fiddle

Though please also note what Rob and Kolink have noted about your setting of attributes/classes etc.

Answer 4

You can just create a string of the required html code and add that to as a html property of parent div. This is simple templating and can work pretty well in most cases.

You should take the approach you are taking only when there is need to edit some property on run time. For static code, there is no need to take such a complex approach.

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

Have you tried using development tools like http://getfirebug.com/ to debug? Is there an element with ID "div1" in your page?