0

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);
Ken Redler
  • 23,863
  • 8
  • 57
  • 69
Vikram Nair
  • 13
  • 1
  • 3
  • 1
    why it doesn't work ? is there javascript error ? is there any problem with the generated html ? please, give us more information to help – Jerome Cance Feb 10 '12 at 16:43
  • Not an answer, but something to consider is the possibility to use a JS templating engine: http://stackoverflow.com/questions/7788611/what-javascript-template-engines-you-recommend . Much less painful than manually stringing together DOM Nodes or text in constructing HTML. Cheers. – artlung Feb 10 '12 at 16:46
  • You have no element with the ID of div1. Stick one in there and it works fine. Otherwise you get an "Cannot call method 'appendChild' of null" error. – j08691 Feb 10 '12 at 16:47

5 Answers5

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 = ...
Rob W
  • 341,306
  • 83
  • 791
  • 678
0

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"));

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
0

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.

El Ronnoco
  • 11,753
  • 5
  • 38
  • 65
0

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;
};
karora
  • 238
  • 1
  • 8
0

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

JoshNaro
  • 2,047
  • 2
  • 20
  • 40