关键词：
1. 插入DOM
当我们获得了某个DOM节点，想在这个DOM节点内插入新的DOM，应该如何做？
1.1 innerHTML
如果这个DOM节点是空的
- 如果这个DOM节点是空的，
直接使用 innerHTML = 'child'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点 - 如果这个DOM节点不是空的，那就不能这么做，因为 innerHTML 会直接替换掉原来的所有子节点。
示例:
<body>
<div id="item"></div>
</body>
<script>
let item = document.getElementById('item');
// 设置HTML
item.innerHTML = 'ABC<span style="color: red;font-size: 24px;">RED</span>XYZ'
</script>
结果:
1.2 appendChild()
appendChild()
如果这个DOM节点不是空的，那就不能这么做，因为 innerHTML 会直接替换掉原来的所有子节点。有两个办法可以插入新的节点。一个是使用 appendChild ，把一个子节点添加到父节点的最后一个子节点。例如:
<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>
把 JavaScript 添加到的最后一项：
let js = document.getElementById('js'), list = document.getElementById('list');
list.appendChild(js);
- 现在，HTML结构变成了这样：
<!-- HTML结构 -->
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
<p id="js">JavaScript</p>
</div>
因为我们插入的 js 节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。更多的时候我们会从零创建一个新的节点，然后插入到指定位置：
let list = document.getElementById('list'),
// 创建一个新的节点
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);
动态创建一个节点然后添加到DOM树中，可以实现很多功能。举个例子，下面的代码动态创建了一个节点，然后把它添加到 节点的末尾，这样就动态地给文档添加了新的CSS定义：
let d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p color: red '; // 把所有P标签字体颜色设置为 red
document.getElementsByTagName('head')[0].appendChild(d);
结果:
1.3 insertBefore()
假定我们要把 Haskell 插入到 Python 之前
<!-- HTML结构 -->
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>
- 可以这么写：
let list = document.getElementById('list'), python = document.getElementById('python'),
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, python);
新的HTML结构如下：
javascript(dom对象的操作)(代码片段)
Dom对象的操作核心doucument获得Dom节点更新节点实战演练删除Dom节点插入节点把已有的标签进行插入创建一个新的标签,实现插入在子节点前插入(insertBefore)操作表单获取表单，MD5密码拦截核心浏览器网页就是一个Dom树形结构 ... 查看详情
javascript--删除dom(代码片段)
1.删除DOM删除一个DOM节点就比插入要容易得多。插入DOM要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：<!--HTML结构--><divid="list"><pid="jav... 查看详情
javascript走dom(代码片段)
javascript遍历dom(代码片段)
javascript遍历dom(代码片段)
javascriptjs-dom-插入元素后(代码片段)
javascriptjs-dom-插入元素后(代码片段)
javascript切换类dom(代码片段)
javascript图像翻转（dom）(代码片段)
javascript元素可见dom(代码片段)
javascript包装元素#dom(代码片段)
javascript包装元素#dom(代码片段)
javascript过滤dom元素(代码片段)
javascript删除dom元素(代码片段)
dom操作技术----动态脚本
创建动态脚本有两种方式：插入外部文件和直接插入JavaScript代码方式一：插入外部文件<scripttype="text/javascript"src="client.js"></script>创建此节点的DOM代码等同于：varscript=documen.createElement("script");script.type="text/javascript";sc 查看详情