javascript创建和插入dom节点

我们首先定义几个节点

<p id = "javascript">javascript</p>
<div id = "list">
    <p id = "se">javaSE</p>
    <p id = "ee">javaEE</p>
    <p id = "me">javaME</p>
</div>

然后来操作节点，可以实现追加

//追加节点
var list = document.getElementById('list');
var js = document.getElementById('javascript');
list.append(js);//追加一个元素
var newP = document.createElement('p');//创建一个p节点
newP.id = 'newP';//赋id
newP.innerText = 'hello,world';//内容
list.append(newP);//追加

//创建一个标签节点
var mScript = document.createElement('script');
script.setAttribute('type','text/javascript');

var mStyle = document.createElement('style');
mStyle.setAttribute('type','text/css');
mStyle.innerHTML = 'body{background-color : yellow}';//设置标签内容
document.getElementsByTagName('head')[0].appendChild(mStyle);//放到head里面生效

下面可以实现在某个节点前添加节点

// 在前面插入节点
var list = document.getElementById('list');
var ee = document.getElementById('ee');
var js = document.getElementById('javascript');
// insertBefore(newNode,targetNode)
list.insertBefore(js,ee);