1、结点的创建和追加
节点创建
元素节点:document.createElement(tag标签名称);
文本节点:document.createTextNode(文本内容);
属性设置:node.setAttribute(名称,值);
节点追加:
父节点.appendChild(子节点);
父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边
父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点
(1)正常生成
<body>
<h2>结点的创建和追加</h2>
</body>
</html>
<script type="text/javascript">
/**
<ul>
<li mean="热情">red</li>
<li mean="冷静">blue</li>
<li mean="生机">green</li>
</ul>
*/
var color = ['red', 'blue', 'green'];
var color_mean = ['热情', '冷静', '生机'];
//创建各种节点
var ull = document.createElement('ul');
for(var k in color){
var lii = document.createElement('li');
lii.setAttribute('mean', color_mean[k]);
var txt = document.createTextNode(color[k]);
//结点追加
lii.appendChild(txt);
ull.appendChild(lii);
}
//document.getElementsByTagName('body')[0].appendChild(ull);
document.body.appendChild(ull);
</script>
效果图:
(2)已有节点追加,被追加节点要发生物理位置移动现象
<body>
<h2>结点的创建和追加</h2>
<ul>
<li mean="热情">red</li>
<li mean="冷静">blue</li>
<li mean="生机">green</li>
</ul>
<ul>
<li mean="饿">orange</li>
</ul>
</body>
</html>
<script type="text/javascript">
//给第二个ul追加页面已有节点:blue被追加进来
//被追加节点要发生物理位置移动现象(节点的个数是固定的,只有一个)
var blue = document.getElementsByTagName('li')[1];
var second_ul = document.getElementsByTagName('ul')[1];
second_ul.appendChild(blue);
</script>
效果图:
(3)已有节点追加,并追加到指定位置
<body>
<h2>结点的创建和追加</h2>
<ul>
<li mean="热情">red</li>
<li mean="冷静">blue</li>
<li mean="生机">green</li>
</ul>
<ul>
<li mean="饿">orange</li>
</ul>
</body>
</html>
<script type="text/javascript">
/**
* orange追加给第一个ul,并设置到blue的前边
* 父节点.indsertBefore(newnode.oldnode);把结点追加到oldnode结点前边
* 父节点.replaceChild(newnode, oldnode);把新节点替换老结点
*/
var blue = document.getElementsByTagName('li')[1];
var orange = document.getElementsByTagName('li')[3];
var first_ul = document.getElementsByTagName('ul')[0];
//first_ul.appendChild(orange);
//first_ul.insertBefore(orange, blue); //orange放在blue的前边
first_ul.replaceChild(orange, blue);
</script>
效果图:
2、节点复制操作
被复制节点.cloneNode(true/false);
true:深层复制
false:浅层复制
<body>
<h2>节点复制操作</h2>
<ul>
<li mean="热情">red</li>
<li mean="冷静">blue</li>
<li mean="生机">green</li>
</ul>
<ul>
<li mean="饿">orange</li>
</ul>
</body>
</html>
<script type="text/javascript">
var blue = document.getElementsByTagName('li')[1];
var fu_blue = blue.cloneNode(true); //深层复制(本身和内部子节点都复制)
var fu_blue = blue.cloneNode(false); //深层复制(只复制本身节点/包括本身的属性)
//把复制的fu_blue追加到第二个ul里面
var second_ul = document.getElementsByTagName('ul')[1];
second_ul.appendChild(fu_blue);
</script>
效果图:
3、节点删除操作
父节点.removeChild(子节点);
<body>
<h2>节点删除操作</h2>
<ul>
<li mean="热情">red</li>
<li mean="冷静">blue</li>
<li mean="生机">green</li>
</ul>
<ul>
<li mean="饿">orange</li>
</ul>
</body>
</html>
<script type="text/javascript">
//删除green节点
var green = document.getElementsByTagName('li')[2];
green.parentNode.removeChild(green);
</script>
效果图: