如何将h3和p添加到锚标记

Question

我想在锚标记内动态添加标题元素和两个<p>标记。

下面是我想要实现的代码。

<a href="http://shreerangpatwardhan.blogspot.com" 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 community as much as I can.</p> 
    <p class="ui-li-aside">Last update: April 9, 2013</p> 
</a> 

以下是我的javascript，我想使这个

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

但标签没有得到追加。

Answer 1

输入字段有值，标签具有的textContent或兼容，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 community 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>

Answer 2

您可以使用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 community as much as I can.</p><p class="ui-li-aside">Last update: April 9, 2013</p>'); 
});