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);