• 震惊 ！！！DOM还能这么用，让我们跟随小编一起去看看吧 !

    创建新的 HTML 元素 (节点) - appendChild（）

    示例

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 	</head>
    7. 	<body>
    8. 		<div id="box">
    9. 			<p id="p1">这是第一段文字</p>
    10. 			<p id="p2">这是第二段文字</p>
    11. 		</div>
    12. 		<script type="text/javascript">
    13. 			var p = document.createElement('p');
    14. 			var text = document.createTextNode('这是一段新的文字');
    15. 			p.appendChild(text);
    16. 			var element = document.getElementById('box');
    17. 			element.appendChild(p);
    18. 		</script>
    19. 	</body>
    20. </html>

    浏览器显示效果 

     解析

     这段代码的作用是创建<p>元素

    var p = document.createElement('p');

    为<p>元素创建一个新的文本节点

    var text = document.createTextNode('这是一段新的文字');

    将文本节点添加到<p>元素中

    p.appendChild(text);

     在一个已存在的元素中添加p元素

    查找已存在的元素

    var element = document.getElementById('box');

    添加到已存在的元素中

    element.appendChild(p);

     创建新的 HTML 元素 (节点) - insertBefore（）

    以上的方法用于添加新元素到尾部

    如果要将新元素添加到开始位置，可以使用insertBefore方法

    示例

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 	</head>
    7. 	<body>
    8. 		<div id="box">
    9. 			<p id="p1">这是第一段文字</p>
    10. 			<p id="p2">这是第二段文字</p>
    11. 		</div>
    12. 		<script type="text/javascript">
    13. 			var p = document.createElement('p');
    14. 			var text = document.createTextNode('这是一段新的文字');
    15. 			p.appendChild(text);
    16. 			var element = document.getElementById('box');
    17. 			var child = document.getElementById('p1');
    18. 			element.insertBefore(p,child);
    19. 		</script>
    20. 	</body>
    21. </html>

    移除已存在的元素

    示例

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 	</head>
    7. 	<body>
    8. 		<div id="box">
    9. 			<p id="p1">这是第一段文字</p>
    10. 			<p id="p2">这是第二段文字</p>
    11. 		</div>
    12. 		<script type="text/javascript">
    13. 		var p =document.getElementById('box');
    14. 		var text = document.getElementById('p1');
    15. 		p.removeChild(text);
    16. 		</script>	
    17. 	</body>
    18. </html>

     解析

    <div>元素包含两个子节点

    1. <div id="box">
    2. 	<p id="p1">这是第一段文字</p>
    3. 	<p id="p2">这是第二段文字</p>
    4. </div>

    查找id=‘box’的元素

    var p =document.getElementById('box');

    查找id=‘p1’的<p>元素

    var text = document.getElementById('p1');

    从父元素中移除子节点：

    p.removeChild(text);

    拓展

    已知要查找的子元素，然后查找其父元素，再删除这个子元素（删除子元素之前必须知道父节点）；

    1. var child = document.getElementById('p1');
    2. child.parentNode.removeChild(child);

    替换HTML元素 - replaceChild（）

    示例

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 	</head>
    7. 	<body>
    8. 		<div id="box">
    9. 			<p id="p1">这是第一段文字</p>
    10. 			<p id="p2">这是第二段文字</p>
    11. 		</div>
    12. 		<script type="text/javascript">
    13. 			var p = document.createElement('p');
    14. 			var text = document.createTextNode('这是一个新的段落');
    15. 			p.appendChild(text);
    16. 			var para = document.getElementById('box');
    17. 			var child = document.getElementById('p2');
    18. 			para.replaceChild(p,child);
    19. 		</script>
    20. 	</body>
    21. </html>

  • 相关阅读:
    python之代理ip的配置与调试方法详解
    设计模式-命令模式
    牛客2022 暑期多校4 D Jobs (Easy Version)（递推优化策略）
    Mac Pro M1测试PyTorch GPU
    Java SE 10 新增特性
    国庆出游远程实测：ToDesk 、TeamViewer、AnyDesk远程控制软件稳定性
    【李沐论文精读】GPT、GPT-2和GPT-3论文精读
    ＜二叉搜索树＞——《C++高阶》
    而今迈步从头越｜nacos逼我在mac上重新安装java8与环境变量的配置
    python的一些知识点
  • 原文地址：https://blog.csdn.net/m0_68633696/article/details/125599160