欢迎访问web记录!每一步的成长都是一种幸福,聪明的女孩擅长记录幸福!
您现在的位置:web记录 > 前端开发 > JavaScript >

DOM删除、添加、隐藏元素

更新时间:2013-07-08 浏览次数:
<script>
window.onload=function()
{
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt1');
 
oBtn.onclick=function()
{
var oLi=document.createElement('li');
var aLi=oUl.getElementsByTagName('li');
oLi.innerHTML=oTxt.value;
//父级.appendChild(子节点)
//oUl.appendChild(oLi);
if(aLi.length>0)
{
oUl.insertBefore(oLi,aLi[0]);
}
else
{
oUl.appendChild(oli);
}
};
};
</script>

 
<input type="text" id="txt1" />
<input type="button" value="创建li" id='btn1' />
<ul id="ul1">
<li>
</li>
</ul>
————————————————————————————————————————————————
<script>
window.onload=function()
{
var aA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1');
for(var i=0; i<aA.length; i++ )
{
aA[i].onclick=function()
{
oUl.removeChild(this.parentNode);
};
}
}
</script>

<ul id="ul1">
<li>sfsdf<a href="javascript:;">删除</a></li>
<li>sfsdf<a href="javascript:;">删除</a></li>
<li>sfsdf<a href="javascript:;">删除</a></li>
<li>sfsdf<a href="javascript:;">删除</a></li>
<li>sfsdf<a href="javascript:;">删除</a></li>
</ul>

 


关键词:

    + 相关信息

    前端案例

    返回顶部 欢迎访问web记录!每一步的成长都是一种幸福,聪明的女孩擅长记录幸福!