增删改查DOM节点-CFANZ编程社区

<div id="id1">
</div>
<script>
    var id1 = document.getElementById('id1');
    id1.innerText = 'abc'
</script>

操作文本

id1.innerText='123'修改文本的值
id1.innerText='456'
id1.innerHTML='<strong>123</strong>'可以解析HTML文本标签
操作js

id1.style.color='red' //属性使用字符串包裹
id1.style.fontSize='50px'; //下划线转驼峰命名
id1.style.padding='2em'

删除节点的步骤：先获取父节点，再通过父节点删除子节点

<div id="father">
     <h1>标题1</h1>
     <p id="p1">p1</p>
     <p id="p2">p2</p>
</div>
<script>
    var self = document.getElementById('p1');
    var father = p1.parentElement;
    father.removeChild(self)
    //删除节点是一个动态的过程
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</script>

注意：删除节点的时候，children是在时刻变化的，删除节点的时候一定要注意！假如我们先删除p1然后想要删除p2这个时候p1已经被删除，所以删除p2的时候，他的位子因该是父类下面的第二个孩子，第一个是h1索引为1即father.removeChild(father.children[1])

我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干！因为会覆盖一前的元素

可以用追加（append）

<p id="js">javascript</p>
<div id="list">
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>
<script>
    //我想把js添加到list的子元素中去
    vat js = document.getElementById('js');//通过id选标签
    vat list = document.getElementById('list');
</script>

在这里插入图片描述
效果：

list.appendChild(js)

在这里插入图片描述

<script>
    //我想把js添加到list的子元素中去
    var js = document.getElementById('js'); //通过id选标签
    var list = document.getElementById('list');
    //通过js创建一个新的节点
    var newP = document.createElement('p'); //创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'hello,chongqing';
    list.appendChild(newP)
</script>

效果：
在这里插入图片描述

//创建一个script标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript')
list.appendChild(myScript)

//可以创建一个style标签
var myStyle = document.createElement('style'); //创建了一个空的style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color: chartreuse;}'; //设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle)

在这里插入图片描述

<script>
    var ee = document.getElementById('ee');
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    //要包含的节点，insertBefore（newNode,targetNode）
    //我们要把一个新的节点，插入到目标节点的前面
    list.insertBefore(js,ee)
</script>

在这里插入图片描述