我们首先定义几个节点
<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);