怎么通过javascript动态给<ul>里面的<li>里面添加<a>标签
function addli(ab)
{
var ul=document.getElementById("projecthome");
var obj=document.createElement("li");
obj.innerHTML=ab;
ul.appendChild(obj);
}
这段代码实现了动态在<ul>里面添加<li>标签，我现在要在<li>里面动态添加<a>请问怎么实现，谢谢 展开
如果是固定链接直接加进去就行了
obj.innerHTML="<a href='http://www.baidu.com'>"+ab+"</a>";
href可以用参数传过来
改一下方法
function addli(ab,href)
{
var ul=document.getElementById("projecthome");
var obj=document.createElement("li");
obj.innerHTML="<a href='"+href+"'>"+ab+"</a>";
ul.appendChild(obj);
}
ab是要显示在链接上的字符串
href就是链接地址。
可以直接用document.getElementById("divid").innerHTML = "<p>内容</p>";的方式来写。
多个可以循环进行处理。
假设段落文本是个数组：array。
可以通过for (var i = 0; i < array.length;i++) {document.getElementById("divid").innerHTML = "<p>"+array[i]+"</p>";}的方式进行处理。
延展：
如果段落过多,直接使用 div.appendChild方法会不段刷新DIV对象,影响运行速度。
正确的方法应该使用 document对象的碎片方法。
document.createDocumentFragment 容器,最后再将这些碎片返回给DIV对象比较合理，例如:
var strArrayList=[]; // 创建一个段落文本数组对象，这些段落文本可能是100个也可能是1000个。
strArrayList[0]='数据111.......';
strArrayList[1]='数据.......';
strArrayList[2]='数据.......';
strArrayList[3]='数据.......';
strArrayList[4]='数据.......';
//...数据n.....
var div=document.getElementById('div1'); //获得DIV对象。
var f=document.createDocumentFragment(); //创建碎片对象。
for(var i=0;i<strArrayList.length;i++){
var p=document.createElement('P'); //动态创建P标签。
p.appendChild(document.createTextNode(strArrayList[i]));//段落字符串。
f.appendChild(p); //附加到碎片对象中。
}
div.appendChild(f);//最后返给DIV对象。
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI 自动完成（Autocomplete） - 默认功能</title>
<script src="jquery-1.9.1.js"></script>
<script>
$(function(){
$("#code").focus(function(){
var $html = $(".ui-widget");
var tableHtml = "<table border='1' id='table'><tr><td>000001|股票名称1</td></tr><tr><td>000002|股票名称2</td></tr><tr><td>000003|股票名称3</td></tr></table>";
$html.append(tableHtml);
$("#table tr td").mouseover(function(){
$("#table tr td").css("background","#fff");
$(this).css("background","red");
});
$("#table tr td").click(function(){
$("#code").val($(this).html().split("|")[0]);
$("#table").remove();
});
});
})
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">标签：</label>
<input id="code">
</div>
</body>
</html>
有不懂的欢迎追问
<ul id="s">
<li>11111111111111111</li>
<li>22222222222222222</li>
<li>33333333333333333</li>
<li>44444444444444444</li>
<li>55555555555555555</li>
</ul>
<input type="button" value="删除第2行" onclick="del(2);">
<input type="button" value="删除第3行" onclick="del(3);">
<input type="button" value="添加到最后行" onclick="add(-1,'最后行');">
<input type="button" value="添加到第二行" onclick="add(2,'第二行');">
<script>
function del(n)
{
var s=document.getElementById('s');
var t=s.childNodes.length;
for (var i=0;i<t;i++)
{
if (i==n-1)
{
s.removeChild(s.childNodes[i]);
}
}
}
function add(n,txt)
{
var s=document.getElementById('s');
var t=s.childNodes.length;
var li= document.createElement("li");
li.innerHTML=txt;
for (var i=0;i<t;i++)
{
if (n==-1)
{
s.appendChild(li);
}
else if (i==n-1)
{
s.insertBefore(li,s.childNodes[i]);
}
}
}
</script>
{
var ul=document.getElementById("projecthome");
var obj=document.createElement("li");
obj.innerHTML=ab;
ul.appendChild(obj);
}
