1. appendChild()
概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。使用方式：fatherdom.appendChild( insertdom )。兼容性：所有浏览器都支持此方法。2. insertBefore()
概念：把要插入的节点添加到指定父级里面的指定节点之前。使用方式：fatherdom.insertBefore( insertdom，chosendom )。兼容性：所有浏览器都支持此方法，但是值得注意的是，如果第二个参数节点不存在，在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中，而其他主流浏览器（Firefox、Chrome、Opera等）下会报错，所以在插入节点的时候，需要先判断第二个参数节点是否存在3. 举例
<!DOCTYPE html> <html lang="en"> <head> <title>practise</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style> #container { width: 200px; height: 200px; background-color: lightblue; } </style> </head> <body> <div id="container"> <div class="aa">aa</div> <div class="bb">bb</div> </div> <script> var Java = function (content) { this.content = content; (function (content) { var div = document.createElement('div'); div.innerHTML = content; div.style.color = 'green'; document.getElementById('container').appendChild(div) })(content) }; var Html = function (content) { this.content = content; (function (content) { var div = document.createElement('div'); div.innerHTML = content; div.style.color = 'red'; var bb = document.getElementsByClassName("bb")[0]; document.getElementById('container').insertBefore(div, bb) })(content) }; Java("这里是Java模块"); Html("这里是HTML模块"); </script> </body> </html>效果：
