html点击时追加元素和删除元素

最新推荐文章于 2023-05-02 11:48:17 发布
最新推荐文章于 2023-05-02 11:48:17 发布
阅读量659 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 网页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40143811/article/details/78196991
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
input {
    margin-right: 15px
}
#tj {
    margin-left: 350px
}
</style>
<script src="jquery-2.1.0.js"></script>
<script>
//
//    function del(type){
//            var idd = "tr"+type;
//            $("#"+idd).remove();
//        };
//        
function del(type){
    $(type).parent().parent().remove();
};

    function tj(){
        var na = $("#name").val();
        var em = $("#email").val();
        var ip = $("#iphone").val();
        var trr = document.createElement("tr");
        trr.innerHTML='<td>'+na+'</td><td>'+em+'</td><td>'+ip+'</td><td><a href="#" onclick="del(this)">Delete</a></td>';
        $('table').append(trr);
    }
</script>
</head>

<body>
<center>
  添加用户
</center>
<div> 姓名:
  <input type="text" id="name"/>
  email:
  <input type="text" id="email"/>
  电话:
  <input type="text" id="iphone"/>
  <br />
  <input type="submit" value="提交" id="tj" onclick="tj()"/>
</div>
<table border="1px" cellspacing="0px">
  <tr>
    <td>姓名</td>
    <td>email</td>
    <td>电话</td>
    <td></td>
  </tr>
  <tr>
    <td>11</td>
    <td>11</td>
    <td>11</td>
    <td><a href="#" onclick="del(this)">Delete</a></td>
  </tr>
  <tr>
    <td>22</td>
    <td>22</td>
    <td>22</td>
    <td><a href="#" onclick="del(this)">Delete</a></td>
  </tr>
</table>
</body>
</html>

html 追加子元素,Dom元素子父节点操作、Dom元素创建追加
weixin_30983353的博客
06-02 1431
Dom元素子父节点操作通过父元素获取子元素var nav=document.querySelector("#nav");console.log(nav.childElementCount);console.log(nav.childNodes);childElementCount表示当前元素 子元素的个数childNodes表示子节点，包含文本和元素，返回的是Nodelist集合，返回值则包含le...
动态生成HTML元素并为元素追加属性
fredaouyang的博客
02-22 1万+
动态生成HTML元素的方法由三种： 第一种：document.createElement()创建元素，再用appendChild( )方法将元素添加到指定节点; 添加a元素： var link = document.createElement('a'); link.setAttribute('href','#'); li
增加HTML元素
qq_44642803的博客
02-09 570
JavaScript脚本可以为DOM动态增加节点，程序为DOM树增加节点时，页面会动态地增加HTML元素。当需要为页面增加HTML元素时，应按如下两个步骤操作。 创建或复制节点 添加节点 创建或复制节点 创建节点通常借助于document对象的createElement方法来实现，语法如下。 ➢document.createElement(Tag): 创建Tag标签对应的节点。 下面的代码示范...
HTML5 新增元素
蓝朽的小世界
05-02 1688
html5新增元素的学习
JavaScript向html中添加元素
qq_32439313的博客
04-02 6887
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;创建li标签啊&lt;/title&gt; &lt;style&gt; ul{ width: 200px; height: 600px;
html元素追加内容,jquery 元素控制(追加元素/追加内容)介绍及应用
weixin_42783709的博客
05-30 388
http://blog.youkuaiyun.com/gisredevelopment/article/details/41126533一、在元素内部/外部追加元素append,prepend:添加到子元素before，after：作为兄弟元素添加html：在我的后面追加一条新闻js:jQuery(function(){//在元素内部追加内容$("#content").append("姚明退役了...")...
JS添加或删除HTML dom元素的方法实例分析
10-17
JavaScript中操作DOM添加和删除元素的方法主要是`document.createElement()`、`appendChild()`、`insertBefore()`、`removeChild()`和`document.createTextNode()`。这些方法可以灵活使用，以实现复杂的页面动态交互...
Jquery元素追加和删除的实现方法
10-22
3. 添加元素节点：使用JQuery的append()方法可以将新的内容追加到匹配的元素内部。例如，$("ul").append("新元素</li>")会将新创建的li元素添加到ul元素内部。另外，prepend()方法则是用于将新内容添加到每个匹配...
jquery html添加元素/删除元素操作实例详解
10-15
以上就是jQuery中添加和删除元素的基本方法及其用法。通过这些方法，我们能方便地管理DOM元素，从而使得网页交互更加流畅。需要注意的是，在进行元素的添加和删除操作时，应当注意代码的执行顺序和上下文环境，以...
jQuery 添加元素和删除元素的方法
10-15
在本文中，我们将深入探讨jQuery中添加和删除元素的方法，以帮助开发者更高效地操作DOM。 首先，让我们讨论如何使用jQuery添加元素。有四种主要的方法可用于向现有元素添加新的HTML内容： 1. **append()**：这个...
javascript删除一个html元素节点的方法
10-25
首先，我们需要了解DOM（Document Object Model），它是HTML和XML文档的一种结构化表示，允许程序和脚本动态更新、添加和删除元素。在DOM中，每个HTML元素都是一个节点，可以被单独选中和操作。 要删除一个HTML元素...
删除当前点击数据操作
m0_56135996的博客
08-18 274
删除当前点击的数据
HTML列表滑动出现删除块点击删除（平板手机适用）
qq_51247669的博客
06-15 467
HTML列表滑动出现删除块点击删除（平板手机适用）
使用jQuery通过点击它删除HTML表格行-超简单
weixin_30478923的博客
08-18 240
jQuery的已成为所有时刻的最常用和最喜爱的JavaScript框架之一。它不仅不会减少在JavaScript编码简单的技术开销，而且也使您的代码的跨浏览器兼容。我已经写了许多关于jQuery教程，这个时候，我也用这个简单的纯实现了。任务是从一个HTML表使用一些时髦的效果，只要按一下该行的行。以下是实现这一目标的jQuery代码。 $(document).ready(function()...
如何用js(jq)给html元素标签前面或者后面增加一个元素标签
热门推荐
橙-极纪元-JJYCheng
07-09 1万+
after()方法,before() 方法,append() 方法,prepend() 方法,appendTo() 方法,prependTo() 方法,insertAfter() 方法,insertBefore() 方法,wrap()方法,wrapAll() 方法,wrapInner() 方法 。各个方法的使用，利弊，BUG等做了深入说明
js通过按钮新增div和删除div
Limy-离人怎挽
08-22 2373
1:html示例 <body> <div class="container-fluid"> <form id="addForm" class="form-horizontal"> <div class="form-group1"> <button onclick="addTr()" type="b...
HTML页面添加元素的方法
hu_lanlan的博客
08-27 8353
append//html语句 <p id="p1">hello world</p> <button id="btn">点击</button>未添加之前的效果图： JS语句：$("#p1").append("hello");添加后，点击2次button后的效果图：prependhtml语句同append，JS语句为：$("#p1").prepend("hello");添加后，点击2次button后的
HTML页面元素的添加与删除
focusぃclouds
06-05 4052
每个载入浏览器的HTML文档都会成为Document对象。Document对象可以使我们从脚本(JavaSctipt)中对HTML元素进行访问。
js输入框输入点击按钮添加表单元素
style201904的博客
05-22 8483
添加表单元素 html <div id="form"> 请输入姓名: <input type="text" id="name"> <br> 请输入性别: <input type="radio" id="sex" name="sex" checked>男 <input type="radio" name="sex"&g...
JavaScript动态操作HTML元素：添加与删除实例
"这篇文章主要介绍了如何使用JavaScript动态添加和删除HTML元素，提供了兼容性良好的代码示例，特别是针对表格行的增删操作。" 在网页开发中，JavaScript是一种常用的语言，用于实现页面的交互性和动态效果。动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值