CODEWITHSUNDEEP
javascripthtml
Vikram Nair
Vikram Nair

Reputation: 13

Convert html code to javascript for dynamic entry

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

Upvotes: 0

Views: 699

Answers (5)

JoshNaro
JoshNaro

Reputation: 2097

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

Upvotes: 0

karora
karora

Reputation: 238

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;
};

Upvotes: 0

El Ronnoco
El Ronnoco

Reputation: 11912

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.

Upvotes: 0

Rob W
Rob W

Reputation: 349232

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

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324790

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

Upvotes: 0

Related Questions