obj.cloneNode(deep);
参数说明：
deep:改参数是一个Boolean值，表示是否为深度复制，深度复制是将当前节点的所有子节点全部复制，
当值为true时，表示深度复制；当值为false时，表示简单复制，简单复制，只复制当前节点，不复制其子节点。
//复制下拉菜单
<form>
<hr>
<select name="shopType" id="shopType">
<option>请选择类型</option>
<option>数码电子</option>
<option>家用电器</option>
<option>床上用品</option>
</select>
<hr>
<div id="di"></div>
<input type="button"value="复制" onclick="addcopy(false)"/>
<input type="button" value="深度复制" onclick="addcopy(true)" />
</form>
<script>
function addcopy(bl){
var shopType=document.getElementById('shopType');
var newType=shopType.cloneNode(bl);
var b=document.createElement('br');
di.appendChild(newType);
di.appendChild(b)
}
</script>
-------------------------------------------------------------------------------------------------------------
//动态创建一个用于选择性别的单选按钮
<form>
<div id="sex">
<label>请选择性别:</label>
<input name="xingbie"type="radio" />男
<input name="xingbie"type="radio" />女
</div>
<p id="showdi"></p>
<script>
function fuzhi(){
var sex=document.getElementById('sex');
var newsex=sex.cloneNode(true);
var showdi = document.getElementById('showdi');
var huanghang=document.createElement('br');
showdi.appendChild(newsex);
showdi.appendChild(huanghang);
}
</script>
---------------------------------------------------------------------------------------------------------------
<div id="kuang">
<ul id="film" style="display: inline-block;">
<h4>最新影片</h4>
<li>变形金刚5：最后的骑士</li>
<li>神奇女侠</li>
<li>新木乃伊</li>
<li>加勒比海盗5：死无对证</li>
</ul>
</div>
<input type="button" onclick="copyfilm()"value="复制影片列表" />
<script>
function copyfilm(){
var film=document.getElementById('film');
var newfilm = film.cloneNode(true);
document.getElementById('kuang').appendChild(newfilm);
}
</script>
-----------------------------------------------------------------------------------------
//删除节点
obj.removeChild(oldChild);
oldChild:表示需要删除的节点
<div id="myList"><p>Coffee</p><p>Tea</p><p>Milk</p></div>
<p id="demo">点击按钮来删除列表中的首个项目。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var list=document.getElementById("myList");
list.removeChild(list.lastChild);
}
</script>
--------------------------------------------------------------------------------------
//通过输入的影片资讯编号删除对应的影片资讯
<h3>最新电影资讯</h3>
<div id="zixun">
<p id="p1">1、《愤怒的小鸟》小鸟飞起来</p>
<p id="p2">2、《极度惊悚》胆小者勿入</p>
<p id="p3">3、《黑海夺金》裘德洛称摸金校尉</p>
<p id="p4">4、《潜伏者》毒师卧底贩毒集团</p>
</div>
<form>
<label>输入影片资讯编号：</label>
<input type="text" name="zixun2"id="zixun2" />
<input type="button" name="shancu" id="shancu" value="删除"onclick="del()" />
</form>
<script>
function del(){
var n=document.getElementById('zixun2').value;
var obj=document.getElementById("zixun");
if(n==1)
{
var p1=document.getElementById('p1');
obj.removeChild(p1);
}else if(n==2){
var p2=document.getElementById('p2');
obj.removeChild(p2);
}else if(n==3){
var p3=document.getElementById('p3');
obj.removeChild(p3);
}else if(n==4){
var p4=document.getElementById('p4');
obj.removeChild(p4);
}
//在使用switch时，表达式n的值必须是赋值的数字类型，别处获取到的在case前不能使用
// switch(n)
// {
// case 1:
// var p1=document.getElementById('p1');
// obj.removeChild(p1);
// break;
// }
}
</script>
------------------------------------------------------------------------------------------------
<table id="tbtr">
<tr id="hang1">
<td id="td1">1</td>
<td id="td11">零基础学JavaScript</td>
</tr>
<tr id="hang2">
<td>2</td>
<td>零基础学HTML5</td>
</tr>
<tr id="hang3">
<td>3</td>
<td>零基础学PHP</td>
</tr>
<tr id="hang4">
<td>4</td>
<td>零基础学Java</td>
</tr>
<tr id="hang5">
<td>5</td>
<td>零基础学Android</td>
</tr>
</table>
<form>
<label>输入删除表格的行数：</label>
<input type="text" name="hang" id="hang" />
<input type="button"value="删除"onclick="deltr()" />
</form>
<script>
function deltr(){
var h=document.getElementById('hang').value;
if(h==1)
{
var tr1=document.getElementById('hang1');
//alert(tr1.parentNode.tagName);tr的父元素不是表格，而是TBODY，所以在这里需要使用 tr1.parentNode去移除它的子元素
tr1.parentNode.removeChild(tr1);
}else if(h==2)
{
var tr2=document.getElementById('hang2');
tr2.parentNode.removeChild(tr2);
}else if(h==3)
{
var tr3=document.getElementById('hang3');
tr3.parentNode.removeChild(tr3);
}else if(h==4)
{
var tr4=document.getElementById('hang4');
tr4.parentNode.removeChild(tr4);
}else if(h==5)
{
var tr5=document.getElementById('hang5');
tr5.parentNode.removeChild(tr5);
}
}
</script>
-------------------------------------------------------------------------------------------------------------------------
//替换节点
obj.replaceChild(new,old)
new:替换后的新节点
old:需要被替换的旧节点
<b id="bb">被替换的文本内容</b>
<p>
输入标记：<input type="text" name="bj" id="bj"></br>
输入文本：<input type="text" name="wb" id="wb" /></br>
<input type="button" value="替换" onclick="change(bj.value,wb.value)" />
</p>
<script>
function change(bj,wb){
var bb=document.getElementById('bb');
var newbb=document.createElement(bj);//这里从参数传过来的标签不需要加“”。
var wenbb=document.createTextNode(wb);
newbb.appendChild(wenbb);
bb.parentNode.replaceChild(newbb,bb);
}
</script>
<div id="showpic"><p></p></div>
<form id="xuanze"name="xuanze">
<label>选择头像：</label>
<select id="sel" name="sel" onchange="picb()">
<option>选择头像</option>
<option>头像1</option>
<option>头像2</option>
<option>头像3</option>
</select>
</form>
<script>
function picb(){
var showpic=document.getElementById('showpic');
if(xuanze.sel.value=="头像1")
{
var tu1=document.createElement('img');
tu1.setAttribute('src','img/bianxing_jingang-006.jpg');
showpic.replaceChild(tu1,showpic.firstChild)
}else if(xuanze.sel.value=="头像2")
{
var tu2=document.createElement('img');
tu2.setAttribute('src','img/bianxing_jingang-007.jpg');
showpic.replaceChild(tu2,showpic.firstChild);
}else if(xuanze.sel.value=="头像3")
{
var tu3=document.createElement('img');
tu3.setAttribute('src','img/bianxing_jingang-008.jpg');
showpic.replaceChild(tu3,showpic.firstChild);
}
}
</script>
<b id="txtb">一生只爱一个人</b>
<br>
<a href="javascript:xie()">将粗体改为斜体</a>
<script>
function xie(){
var txtb=document.getElementById('txtb');
var i=document.createElement('i');
var itxt=document.createTextNode("一生只爱一个人");
i.appendChild(itxt);
txtb.parentNode.replaceChild(i,txtb);
}
</script>
