使用removeChild , appendChild制作兼容IE,FF,Opera的自动增加和删除网页元素的JS代码

本文介绍了一种使用JavaScript动态生成和操作HTML元素的方法,包括按钮点击事件处理、元素创建及删除等,适用于前端开发人员学习和参考。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

 

 

 

<HTML>
<HEAD>


</HEAD>
<BODY id="body1">
<input type="button" value="添加 for IE and FF and Opera" onclick="add1()" />
<input type="button" value="测试 only for IE and Opera" onclick="add2()" />
<input type="button" value="清空" onclick="div1.innerHTML = ''; div2.innerHTML = ''; " />
<div id="div1"></div>
<div id="div2"></div>
</BODY>

<script>

function del(){

  var div1_2=document.getElementById("div1_2");//通过ID得到对象
    var tmp = div1_2.parentNode;//得到对象的父节点
    tmp.removeChild(div1_2);//用父节点的removeChild方法删除要删除的对象
    //注意,因为代码中自动生成的DIV的ID全都是div1_2所以他们形成了一个数组,上面的删除代码相当于删除了div1_2[0]所以无论你点击的是哪个层的删除,将要删除的都是最上面的一个。
    //其实想解决这个问题只需要将代码稍做修改,但这不属于我这里要叙述的内容,所以就不在代码中出现。

}
 
var int_i=1; 
function add1()
{

var buf="<div id=/"div1_2/" style=/"width:auto; height:50px; background:#000000; color:#ffffff;/"><span onclick=/"del();/">测试"+int_i+"(点击关闭)</span>";
    buf+="<input type=/"text/" name=/"textfield/" /></div>";
    div1.innerHTML += buf;
  int_i++;
}

function add2()
{

        var e = document.createElement('a');
        e.href = '';
        e.innerText = '测试2<br//>';
        div2.appendChild(e);

}
</script>

</HTML>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值