课程目录

添加删除节点

阅读: 3107    发布时间: 2018-01-24 15:35:28

创建节点

  • 通过document.createElement()，创建新节点

  • 通过document.createTextNode()，创建文本节点

  • 通过appendChild，将子节点追加到父节点中

<div id="demo">
</div>


<script>
    var para=document.createElement('p');
    var child=document.createTextNode("测试")
    para.appendChild(child);

    var demo=document.getElementById("demo");
    demo.appendChild(para);
</script>

innerHTML

  • 通过innerHTML可以修改某个节点内的全部内容

  • 通过innerHTML可以创建复杂的节点

var demo=document.getElementById("demo");
demo.innerHTML='<p class="test">测试</p>';

删除节点

  • 通过parent.removeChild(child) 删除某个父节点下的子节点

<div id="parent">
    <div id="child1">123</div>
    <div id="child2">456</div>
</div>


<script>

    var parent=document.getElementById('parent')
    var child=document.getElementById('child1')

    parent.removeChild(child);

</script>

  • 删除某个节点，必须要知道他的父节点

  • 如果已知某个子节点，可以通过先查找他的父节点，然后删除该子节点

var child=document.getElementById('child1')
child.parentNode.removeChild(child);



← 查找父子DOM

-END-