利用script添加或删除表单对象

最新推荐文章于 2022-08-03 23:07:53 发布

OTF893

最新推荐文章于 2022-08-03 23:07:53 发布

阅读量125

点赞数

文章标签： html chrome javascript

本文链接：https://blog.csdn.net/weixin_62484294/article/details/121548799

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script>
           function addNode(){
       //创建节点元素对象 p标签对象自动换行
       var   p=document.createElement('span');
       //在p标签里添加文字
       p.innerText='照片：'
       //创建节点对象
       var inp=document.createElement('input');
   //将inp类型改为file
       inp.type='file';
       //创建第二个节点对象
       var inp2=document.createElement('input');
       inp2.type='button'
       inp2.value='删除';
       //绑定删除按钮的设置移除字节点与本身
       //尽量移除所有子节点，再去移除本身，递归方式最好
       inp2.οnclick=function(){
           //移除子节点
           p.removeChild(inp);
           p.removeChild(inp2);
           //移除本身
           p.remove();
       }

       //获得表单元素对象
       var fom=document.getElementById('fom');

       //添加节点对象
//       fom.appendChild(p); //添加之后
       //获得最后一个节点对象
       var last=document.getElementById('last')

       //将p标签添加到哪个标签之前
       fom.insertBefore(p,last);
       p.appendChild(inp);
       p.appendChild(inp2);
}

       </script>

   </head>
   <body>
       <form id="fom">
           <p>
               用户名：<input type="text" />
           </p>

       <p>
               照片：<input type="file" />
               <input type="button" value="添加" οnclick="addNode()"/>
       </p>

       <p id="last">
               <input type="button" value="提交" />
               <input type="button" value="清空" />
           </p>

</form>
</body>
</html>

# 注释内容比较全！

OTF893

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用script添加或删除表单对象

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script> function addNode(){ //创建节点元素对象 p标签对象自动换行 var p=document.createElement('span...
复制链接

扫一扫