参考地址 javaScript替换元素节点
使用原生JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE HTML> <html> <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" > <title>无标题文档</title> </head> <body> <div><b id= "oldnode" >JavaScript</b>是一个很常用的技术,为网页添加动态效果。</div> <a href= "javascript:replaceMessage()" > 将加粗改为斜体</a> <script type= "text/javascript" > function replaceMessage(){ var oldNode=document.getElementById( "oldnode" ); //提取老元素; var newNode=document.createElement( "i" ); //创建一个新的节点; newNode.innerHTML=oldNode.innerHTML; //把旧的oldnode内容赋值给新的newnode,要不然newnode是无内容,只是简单的改了个属性,把b变成了i,显示出来的是空; oldNode.parentNode.replaceChild(newNode,oldNode); //实现子节点(对象)的替换,返回被替换对象的引用; } </script> </body> </html> |
使用jquery进行替换节点
可以使用 replaceWith replaceAllWith