HTML DOM 插入节点

关键字	简介	示例代码
appendChild	追加节点	示例代码
insertBefore	在前方插入节点	示例代码
	练习-动态加载js	示例代码
	答案-动态加载js	示例代码

示例 1 : 追加节点    
示例 2 : 在前方插入节点    
示例 3 :  练习-动态加载js         
示例 4 :  答案-动态加载js    

 示例 1 : 

追加节点

 提问

通过appendChild追加节点。 追加节点一定是把新的节点插在最后面 
1. 创建新节点 
2. 获取父节点 
3. 通过appendChild追加

运行效果

代码比较

代码超过 20行，点击查看 

试一下

 示例 2 : 

在前方插入节点

 提问

有时候，需要在指定位置插入节点，而不是只是追加在后面。 
这个时候就需要用到insertBefore 
1. 创建新节点 
2. 获取父节点 
3. 获取需要加入的子节点 
4. 通过insertBefore插入 
注: insertBefore的第一个参数是新元素，第二个参数是插入位置

运行效果

代码比较

代码超过 20行，点击查看 

试一下

 示例 3 : 

练习-动态加载js 

    

 提问

 Or   姿势不正确，事倍功半。 点击查看做练习的正确姿势

传统的加载js文件的办法是这样

 

<script src="/study/hello.js"></script>

 

准备一个test3041.js，其内容是：

 

alert("this is test3041.js");

 

做一个按钮，当页面打开的时候，并不会加载这个test3041.js,只有在点击了按钮之后，才加载test3041.js

 示例 4 : 

答案-动态加载js

 提问

查看答案 在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

 

 

 

 

 

 替换节点