javascript+dom更改html内容总结

利用JavaScript和dom结合来动态改变HTML内容。

1. innerHTML

HTML代码

<textarea id="temp73400" style="width: 505px; height: 132px;" cols="55" rows="8"><div onmouseover="this.innerHTML='<a href=#>test div</a>'" style="width:100px;height:100px;border:#333 1px solid;"></div></textarea>
<input class="userbutton" onclick="runEx('temp73400')" maxlength="2147483647" size="20" type="button" value="运行此代码"> <input class="userbutton" onclick="doCopy('temp73400')" maxlength="2147483647" size="20" type="button" value="复制此代码"> <input class="userbutton" onclick="saveCode('temp73400')" maxlength="2147483647" size="20" type="button" value="保存此代码">
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

2.outerHTML(IE only)

HTML代码

<textarea id="temp30011" style="width: 491px; height: 132px;" cols="53" rows="8"><style type="text/css"> span a{color:#DF860D;font-weight:bold;} </style> <div><a href="#" onclick="this.outerHTML='<span>'+this.outerHTML+'</span>'">点击查看效果</a></div></textarea>
<input class="userbutton" onclick="runEx('temp30011')" maxlength="2147483647" size="20" type="button" value="运行此代码"> <input class="userbutton" onclick="doCopy('temp30011')" maxlength="2147483647" size="20" type="button" value="复制此代码"> <input class="userbutton" onclick="saveCode('temp30011')" maxlength="2147483647" size="20" type="button" value="保存此代码">
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

3.add应用于：areas | control | Range | options | namespaces

HTML代码

<textarea id="temp33620" style="width: 490px; height: 132px;" cols="53" rows="8"><style type="text/css"> div{font-size:12px;margin:6px 0px;} input{border:#999999 1px solid;font-size:12px;} .ipt1{width:120px;height:16px;} .ipt2{width:20px;height:16px;color:#124D6B;} .ipt3{width:40px;height:20px;} select{width:266px;border:#999999 1px solid;font-size:12px;height:22px;} </style> <script> function add(){ var text,index; with (document.getElementsByTagName("input")[1]) index=parseInt(value,10); with (document.getElementsByTagName("input")[0]) if (value=="") text=value="第"+ index.toString()+"个option子对象";else text=value; var option=document.createElement("option"); document.getElementsByTagName("select")[0].options.add(option,index); option.innerHTML=option.Value=text; document.getElementsByTagName("input")[0].value="第"+(index+1)+"个option子对象"; document.getElementsByTagName("input")[1].value=index+1; option.selected=true; } </script> <select><option value="0" selected>第0个option子对象</option></select> <div> 文本：<input class="ipt1" type="text" value="第1个option子对象"> 序号：<input class="ipt2" type="text" value="1"> <input class="ipt3" type="button" value="添加" onclick="add()"></textarea>
<input class="userbutton" onclick="runEx('temp33620')" maxlength="2147483647" size="20" type="button" value="运行此代码"> <input class="userbutton" onclick="doCopy('temp33620')" maxlength="2147483647" size="20" type="button" value="复制此代码"> <input class="userbutton" onclick="saveCode('temp33620')" maxlength="2147483647" size="20" type="button" value="保存此代码">
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

4.document.createElement(tag)+appendChild(e)

HTML代码

<textarea id="temp96235" style="width: 524px; height: 132px;" cols="57" rows="8"><style type="text/css"> ul{color:#003399;font-size:12px;line-height:22px;} ul a:link,ul a:visited{color:#003399;text-decoration:none;} ul a:hover{color:#CD720C;text-decoration:underline;} </style> <script> var i=1; function append(){ this.li=document.createElement("li"); this.a=document.createElement("a"); this.a.setAttribute("href","#"); //必须 document.getElementsByTagName("ul")[0].appendChild(this.li).appendChild(this.a); i++; this.a.innerHTML="第"+i.toString()+"个列表项目"; } </script> <ul> <li>第1个列表项目</li> </ul> <input type="button" value="添加Li" onclick="append()"></textarea>
<input class="userbutton" onclick="runEx('temp96235')" maxlength="2147483647" size="20" type="button" value="运行此代码"> <input class="userbutton" onclick="doCopy('temp96235')" maxlength="2147483647" size="20" type="button" value="复制此代码"> <input class="userbutton" onclick="saveCode('temp96235')" maxlength="2147483647" size="20" type="button" value="保存此代码">
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

5.document.write("")清除页面内容

HTML代码

<textarea id="temp34947" style="width: 529px; height: 132px;" cols="58" rows="8"><script> function clearcontent(){ document.write(""); document.close(); } </script> <input type=button value="清除页面内容" onclick="clearcontent();"></textarea>
<input class="userbutton" onclick="runEx('temp34947')" maxlength="2147483647" size="20" type="button" value="运行此代码"> <input class="userbutton" onclick="doCopy('temp34947')" maxlength="2147483647" size="20" type="button" value="复制此代码"> <input class="userbutton" onclick="saveCode('temp34947')" maxlength="2147483647" size="20" type="button" value="保存此代码">
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

6.cloneNode

HTML代码

<textarea id="temp45369" style="width: 505px; height: 132px;" cols="55" rows="8"><style type="text/css"> ul{color:#003399;font-size:12px;line-height:22px;} </style> <script> function Clone(){ var o=document.getElementsByTagName("ul")[0].cloneNode(true); document.getElementsByTagName("div")[0].appendChild(o); } </script> <ul> <li>第1个列表项目</li> <li>第2个列表项目</li> <li>第3个列表项目</li> </ul> <div></div> <input type=button value="克隆UL" onclick="Clone();"></textarea>
<input class="userbutton" onclick="runEx('temp45369')" maxlength="2147483647" size="20" type="button" value="运行此代码"> <input class="userbutton" onclick="doCopy('temp45369')" maxlength="2147483647" size="20" type="button" value="复制此代码"> <input class="userbutton" onclick="saveCode('temp45369')" maxlength="2147483647" size="20" type="button" value="保存此代码">
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

7.confirm

HTML代码

<textarea id="temp60987" style="width: 513px; height: 132px;" cols="56" rows="8"><script> function userconfirm(){ var sMessage=document.getElementsByTagName("input")[0].value+"？"; var bConfirm=window.confirm(sMessage); with (document.getElementsByTagName("input")[0]) if(bConfirm) value="YES"; else value="NO"; } </script> <input type="button" value="显示对话框" onclick="userconfirm();"></textarea>
<input class="userbutton" onclick="runEx('temp60987')" maxlength="2147483647" size="20" type="button" value="运行此代码"> <input class="userbutton" onclick="doCopy('temp60987')" maxlength="2147483647" size="20" type="button" value="复制此代码"> <input class="userbutton" onclick="saveCode('temp60987')" maxlength="2147483647" size="20" type="button" value="保存此代码">
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

8.removeChild

HTML代码

<textarea id="temp40692" style="width: 489px; height: 132px;" cols="53" rows="8"><style type="text/css"> body{background-color:#EEEEEE; font-size:12px;} ul{font-size:12px;line-height:20px;width:200px;margin:16px 0px;} li{background-color:#CCCCCC; margin:2px 0px; padding-left:6px;} </style> <script language="javascript"> function createList(){ var ul=document.createElement("ul"); for(var i=0;i<=6;i++){ var li=document.createElement("li"); li.innerHTML="测试文字"+i.toString(); li.onclick=changebg; li.ondblclick=remove; ul.appendChild(li); } document.body.appendChild(ul); } function changebg(){ if(this.change){ this.style.backgroundColor="#666666"; this.style.color="#EEEEEE"; this.change=false; }else{ this.style.backgroundColor="#999999"; this.style.color="#333333"; this.change=true; } } function remove(){ var p=this.parentNode; p.removeChild(this); if(p.getElementsByTagName('li').length==0){p.parentNode.removeChild(p);} } </script> <input type=button value="创建列表" onclick="createList()"> 双击可删除</textarea>
<input class="userbutton" onclick="runEx('temp40692')" maxlength="2147483647" size="20" type="button" value="运行此代码"> <input class="userbutton" onclick="doCopy('temp40692')" maxlength="2147483647" size="20" type="button" value="复制此代码"> <input class="userbutton" onclick="saveCode('temp40692')" maxlength="2147483647" size="20" type="button" value="保存此代码">
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

添加清除FF下空白节点函数：

HTML代码

<textarea id="temp1576" style="width: 486px; height: 132px;" cols="52" rows="8"><script language="javascript" type="text/javascript"> //删除空白节点，兼容FF和IE function cleanWhitespace(oEelement){ for(var i=0;i<oEelement.childNodes.length;i++){ var node=oEelement.childNodes[i]; if(node.nodeType==3 && !/\S/.test(node.nodeValue)){node.parentNode.removeChild(node)} } } //删除子节点 function _remove(){ var li=document.getElementsByTagName("li"); var ul=document.getElementsByTagName("ul")[0]; cleanWhitespace(ul); if(ul.hasChildNodes()){ul.removeChild(li[0]);}else{alert("没有了！")} } </script> <ul> <li>白天</li> <li>黎明</li> <li>黑夜</li> </ul> <input type="button" value="removeChild" onclick="_remove()" /></textarea>
<input class="userbutton" onclick="runEx('temp1576')" maxlength="2147483647" size="20" type="button" value="运行此代码"> <input class="userbutton" onclick="doCopy('temp1576')" maxlength="2147483647" size="20" type="button" value="复制此代码"> <input class="userbutton" onclick="saveCode('temp1576')" maxlength="2147483647" size="20" type="button" value="保存此代码">
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

9.insertBefore()

HTML代码

<textarea id="temp18925" style="width: 484px; height: 132px;" cols="52" rows="8"><style type="text/css"> body{background-color:#EEEEEE; font-size:12px;line-height:22px;} span{border:#333333 1px dashed; padding:2px;} ul{width:200px;} ul li{width:100%;} </style> <script language="javascript" type="text/javascript"> var li,ul; function tag(tag){return document.getElementsByTagName(tag)} function nodetype(){ li=document.getElementsByTagName("li"); ul=document.getElementsByTagName("ul"); for(var i=0;i<li.length;i++){ li[i].setAttribute("num",i); li[i].onclick=choose; li[i].ondblclick=exchange; } } function exchange(){ L=this.getAttribute("num"); if(L>0){ul[0].insertBefore(li[L],li[L-1]);}else{alert("当前已经是第一个了！")}; } function choose(){ for(var i=0;i<li.length;i++){li[i].setAttribute("num",i);li[i].style.backgroundColor="#ededed";}; this.style.backgroundColor="#dedede"; } window.onload=nodetype; </script> <div> <ul> <li>节点内容1</li> <li>节点内容2</li> <li>节点内容3</li> <li>节点内容4</li> </ul> </div> 在列表项目上双击，可以交换上下位置</textarea>
<input class="userbutton" onclick="runEx('temp18925')" maxlength="2147483647" size="20" type="button" value="运行此代码"> <input class="userbutton" onclick="doCopy('temp18925')" maxlength="2147483647" size="20" type="button" value="复制此代码"> <input class="userbutton" onclick="saveCode('temp18925')" maxlength="2147483647" size="20" type="button" value="保存此代码">
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

10.replaceChild(newNode,oldNode)

HTML代码

<textarea id="temp19993" style="width: 486px; height: 132px;" cols="53" rows="8"><script language="javascript" type="text/javascript"> function _replace(){ var li=document.getElementsByTagName("li"); var ul=document.getElementsByTagName("ul")[0]; ul.replaceChild(li[2],li[1]); ul.replaceChild(li[1],li[0]); } </script> <ul> <li>白天</li> <li>黎明</li> <li>黑夜</li> </ul> <input type="button" value="replaceChild" onclick="_replace()" /></textarea>
<input class="userbutton" onclick="runEx('temp19993')" maxlength="2147483647" size="20" type="button" value="运行此代码"> <input class="userbutton" onclick="doCopy('temp19993')" maxlength="2147483647" size="20" type="button" value="复制此代码"> <input class="userbutton" onclick="saveCode('temp19993')" maxlength="2147483647" size="20" type="button" value="保存此代码">
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]