DOM 节点创建插入和删除

最新推荐文章于 2023-03-05 18:00:13 发布

白开水为啥没味

最新推荐文章于 2023-03-05 18:00:13 发布

阅读量122

点赞数

分类专栏：笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_53478650/article/details/121001033

版权

笔记专栏收录该内容

32 篇文章 4 订阅

订阅专栏

//创建和插入

<!DOCTYPE html>
<html>
   <head>
       <meta http-equiv="content-type" content="text/html; text/html; charset=UTF-8" >
       <title>添加节点示例</title>
       <script language="JavaScript">
       function insertStr()
       {
           var f=document.form1;
           var value=f.str.value;
           if(value!=""){
               //从最终的TextNode 节点开始,慢慢形成<tbody>结构
               var text=document.createTextNode(value);//新建一个TextNode 节点
                               var td =document.createElement("td");//新建一个
                               var tr=document.createElement("tr");
                               var tbody =document.createElement("tbody");
                               td.appendChild(text);//将节点text加入td中
                               tr.appendChild(td);
                               tbody.appendChild(tr);
                               var parNode=document.getElementById("tablel");
                               parNode.insertBefore(tbody,parNode.firstChild);//将节点tbody插入到节点顶部
                               //parNode.appendChild(tbody);


           }


       }


       </script>
   </head>
   <body>
       <form name="form1" method="post" action="">
           <input name="str" type="text" id="str" value=""/>
           <input name="insert" type="button" id="insert" value="留言" οnclick="insertStr()"/>






       </form>
       <table width="400" border="1" cellpadding="0" cellspacing="0" id="tablel">
           <tbody>

               <tr>

                   <td height="25">网友留言列表:</td>

               </tr>




           </tbody>





       </table>




   </body>
</html>

//删除节点

<!DOCTYPE html>
<html>
   <head>
       <meta http-equiv="content-type" content="text/html; charset=utf-8">
       <title>删除节点示例</title>
       <script type="text/javascript">
       function delNode()
       {
           var dNode=document.getElementById("sixty1"); //访问被删除的节点
           document.body.removeChild(dNode); //删除图片


       }
       function repNode()
       {
           var oldimage=document.getElementById("sixty2");//访问被替换的节点
           var newimage=document.createElement("img"); //创建一个图片节点
           newimage.setAttribute("src","https://img0.baidu.com/it/u=1582845927,77740937&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500");//设置图片路径
           document.body.replaceChild(newimage,oldimage);//替换本来的图片

       }


       </script>
   </head>
   <body>
       <h2>喜欢的水果</h2>
       <input id="b1" type="button" value="删除图片" οnclick="delNode()"/>
       <input id="b2" type="button" value="替换图片" οnclick="repNode()" /><br />
       <img src="https://img0.baidu.com/it/u=1923661580,2632176864&fm=26&fmt=auto" id="sixty1" alt="1" />
       <img src="https://img2.baidu.com/it/u=3445578133,3485963344&fm=26&fmt=auto" id="sixty2" alt="2" />
   </body>
</html>

白开水为啥没味

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM 节点创建插入和删除

//创建和插入<!DOCTYPE html><html> <head> <meta http-equiv="content-type" content="text/html; text/html; charset=UTF-8" > <title>添加节点示例</title> <script language="JavaScript"> fu...
复制链接

扫一扫