创建和插入DOM节点
2022/2/14 23:11:55
本文主要是介绍创建和插入DOM节点,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
插入节点
我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素了,我们就不能这么干了!会产生覆盖
追加
<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> let js = document.getElementById('js'); let list = document.getElementById('list'); list.appendChild(js); </script>
效果:
创建一个新的标签,实现插入
<script> let js = document.getElementById('js'); // 已经存在的节点 let list = document.getElementById('list'); // 通过JS 创建一个新的节点 let newP = document.createElement('p'); // 创建一个p标签 newP.id = 'newP'; newP.innerText = 'Hello, test'; // 创建一个标签节点 (通过这个属性,可以设置任意的值) let myScript = document.createElement('script'); myScript.setAttribute('type', 'text/javascript') // 可以创建一个style标签 let myStyle = document.createElement('style'); myStyle.setAttribute('type', 'text/css'); myStyle.innerHTML = 'body{background-color: chartreuse;}'; // 设置标签内容 document.getElementsByTagName('head')[0].appendChild(myStyle); </script>
insertBefore
let ee = document.getElementById('ee'); let js = document.getElementById('js'); let list = document.getElementById('list'); // 要包含的节点:insertBefore(newNode, targetNode) list.insertBefore(js, ee);
这篇关于创建和插入DOM节点的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现