DOM操作

最新推荐文章于 2024-08-25 09:57:22 发布

林linYS

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量46

点赞数

文章标签： javascript dom

本文链接：https://blog.csdn.net/weixin_45987924/article/details/119566100

版权

DOM操作

更新DOM节点

<body>
    <div id="father">
        <h1>the name</h1>
        <p class="p1">test p</p>
    </div>
</body>

<script>
	var d1 = document.getElementById('father');
	d1.innerText = '123';
	d1.innerHTML = '<strong>456</strong>';
	d1.style.color = 'red';
</script>

删除DOM节点

<script>
	var d1 = document.getElementById('father');
	var h1 = document.getElementsByTagName('h1');//返回的是一个数组
	d1.removeChild(h1[0]);//删除数组中的第一个
</script>

插入DOM节点

<body>
    <p id="one">one</p>
    <div id="father">
        <h1>the name</h1>
        <p class="p1">test p</p>
    </div>
</body>

one移到div中

<script>
    var d1 = document.getElementById('father');
    d1.appendChild(document.getElementById('one'));
</script>

新增一个节点并且插入到div中

<script>
    var d1 = document.getElementById('father');
	//创建一个<p id="new" style="color: yellow">new element</p>
    var newelement = document.createElement('p');//创建<p></p>标签,可以创建各种标签，例如link，scirpt
    newelement.id = 'new';//创建一个id
    //newelement.setAttribute('id','new');，创建一个id的另一种方式
    newelement.innerText = 'new element';
    newelement.style.color = 'yellow';
	//newelement.setAttribute('style','color: yellow');也可以这样赋值颜色
    d1.appendChild(newelement);
</script>

在h1的前面插入p

<script>
    var d1 = document.getElementById('father');
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementsByClassName('p1');
	//父节点.insertBefore(newNode,targetNode)
    d1.insertBefore(p1[0],h1[0]);//在h1的前面插入p1
</script>

林linYS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM操作

DOM操作更新DOM节点<body> <div id="father"> <h1>the name</h1> <p class="p1">test p</p> </div></body><script> var d1 = document.getElementById('father'); d1.innerText = '123';
复制链接

扫一扫