I want to dynamically add a header element and two <p> tags inside an anchor tag.

Below is the code I want to achieve.

<a href="" class= "ui-list">
  <h3>Author: Shreerang Patwardhan</h3>
  <p><b>Description:</b> Spatial Unlimited is a Tech blog where, examples using Google Maps API v3 and Jquery Mobile are shared. I have tried to give back to the developer munity as much as I can.</p>
  <p class="ui-li-aside">Last update: April 9, 2013</p>
</a>

and below is my javascript which I am trying to make this

var a =document.createElement("a");
var h3=document.createElement("h3");
var p=document.createElement("p");
var p1=document.createElement("p");
a.setAttribute('href', "#");
h3.setAttribute('value',"Author:"+name);
p.setAttribute('value',"Description"+finalsummary);
p1.setAttribute('value',"Last update:"+finaldate);
p1.setAttribute("class","ui-li-aside");
a.appendChild(p1);
a.appendChild(p);
a.appendChild(h3);

but the tags are not getting appended.

I want to dynamically add a header element and two <p> tags inside an anchor tag.

Below is the code I want to achieve.

<a href="http://shreerangpatwardhan.blogspot." class= "ui-list">
  <h3>Author: Shreerang Patwardhan</h3>
  <p><b>Description:</b> Spatial Unlimited is a Tech blog where, examples using Google Maps API v3 and Jquery Mobile are shared. I have tried to give back to the developer munity as much as I can.</p>
  <p class="ui-li-aside">Last update: April 9, 2013</p>
</a>

and below is my javascript which I am trying to make this

var a =document.createElement("a");
var h3=document.createElement("h3");
var p=document.createElement("p");
var p1=document.createElement("p");
a.setAttribute('href', "#");
h3.setAttribute('value',"Author:"+name);
p.setAttribute('value',"Description"+finalsummary);
p1.setAttribute('value',"Last update:"+finaldate);
p1.setAttribute("class","ui-li-aside");
a.appendChild(p1);
a.appendChild(p);
a.appendChild(h3);

but the tags are not getting appended.

• javascript
• jquery
• html
• jquery-mobile

• That probably works just fine, but you never append the anchor to anything ` – adeneo Commented May 2, 2015 at 15:49
• have a read of stackoverflow./questions/7023512/… – mplungjan Commented May 2, 2015 at 15:49
• Also P does not have value – mplungjan Commented May 2, 2015 at 15:52
• Hi I am appending this a anchor tag to an li element and appending the li to an ui – Gopi Nath Commented May 2, 2015 at 15:53

2 Answers 2

Input fields have value, tags have textContent or to be patible, innerHTML

var name="Shreerang Patwardhan"
var finalsummary ="Spatial Unlimited is a Tech blog where, examples using Google Maps API v3 and Jquery Mobile are shared. I have tried to give back to the developer munity as much as I can.";
var finaldate = new Date().toLocaleString();
var a =document.createElement("a");
var h3=document.createElement("h3");
var p=document.createElement("p");
var p1=document.createElement("p");
var li = document.createElement("li");
a.setAttribute('href', "#");
h3.innerHTML="Author: "+name;
p.innerHTML="Description: "+finalsummary;
p1.innerHTML="Last update:"+finaldate;
p1.setAttribute("class","ui-li-aside");
a.appendChild(p1);
a.appendChild(p);
a.appendChild(h3);
li.appendChild(a)
document.getElementById("content").appendChild(li);

<ul id="content"></ul>

You can use jQUERY:

$(document).ready(function(){
$(".ui-list").append('<h3>Author: Shreerang Patwardhan</h3><p><b>Description:</b> Spatial Unlimited is a Tech blog where, examples using Google Maps API v3 and Jquery Mobile are shared.I have tried to give back to the developer munity as much as I can.</p><p class="ui-li-aside">Last update: April 9, 2013</p>');
});