HTML DOM的创建,删除及替换

创建HTML元素

  document.appendChild()
  将新元素作为父元素的最后一个子元素进行添加
  如需向HTML DOM添加新元素,首先必须创建该元素,然后把它追加到已有的元素上

var newElement = document.createElement("p")   //创建新元素p
var newTextNode = document.createTextNode("文本节点")   //创建新文本节点
newElement.appendChild(newTextNode)  //向 <p> 元素追加文本节点

var element = document.getElementById("div_id")
element.appendChild(newElement)  

  document.insertBefore()

  该方法可以在指定位置创建新元素

var newElement=document.createElement("p");
var newTextNode=document.createTextNode("文本节点");
newElement.appendChild(newTextNode);

var element=document.getElementById("div_id");
var child=document.getElementById("p1");
element.insertBefore(newElement,child); //将newElement插入到child节点前

删除HTML元素

  document.removeChild()

    var parent=document.getElementById("div1");
    var child=document.getElementById("p1");
    parent.removeChild(child);     
    
    /*
    要想删除一个元素必须要通过父元素调用removeChild()方法实现
    如果确定删除的元素但不确定父元素,可通过以下方式实现
    即通过parentNode属性获取父元素,然后再调用removeChild()方法实现
    
    var child=document.getElementById("p1");
    child.parentNode.removeChild(child);
    */

替换HTML元素

  document.replaceChild()

    var parent=document.getElementById("div1");
    var child=document.getElementById("p1");
    var para=document.createElement("p");
    var node=document.createTextNode("这是一个新的段落。");
    para.appendChild(node);
    parent.replaceChild(para,child);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值