jquery中动态添加div, 然后在div中动态添加<a>标签和事件, 怎么样把text的值 改变成<a> 标签或者增加属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery中动态添加div, 然后在div中动态添加<a>标签和事件, 怎么样把text的值 改变成<a> 标签或者增加属性相关的知识，希望对你有一定的参考价值。
这个TEXT指的是你的变量吗？ 还是JQ方法？
你可以按我以下的思路试试： （ps：不知道我理解对没~）
var text = xxxxxxxx;//定义text，添加div
$(this).append('div');
//在div里添加a标签，并将text作为a的href使用
$('div').html('<a href="'+text+'"></a>') 参考技术A 用JQ的事件委托，一般动态添加的元素需要用到事件委托！具 参考技术B 你把你现在的代码发出来看看。
python测试开发django-166.jQuery 使用append()动态添加div元素
前言
在页面上动态添加div元素，比如用户在添加多个银行卡的时候，可以动态添加和删除div元素
使用场景
用户点添加按钮，能添加一项div,点删除按钮可以删除一项
前端结合bootstrap实现
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/static/bootstarp/css/bootstrap.min.css" rel="stylesheet">
<script src="/static/bootstarp/jquery/jquery.min.js"></script>
<script src="/static/bootstarp/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default" id="cards">
<div class="panel-heading">
<a class="delete-row pull-right">
<i class="glyphicon glyphicon-plus" ></i>
</a>
<b>添加银行卡</b>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">
<a class="delete-row pull-right">
<i class="glyphicon glyphicon-remove" ></i>
</a>
<b>绑定银行卡</b>
<span class="formset-num">1</span>
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-12">
<div class="input-group">
<div class="input-group-addon">卡号</div>
<input type="text" class="form-control" name="card" placeholder="card no">
</div>
</div>
<div class="form-group col-md-4 col-xs-4">
<div class="input-group">
<div class="input-group-addon">选择银行</div>
<select name="bank" class="selectpicker form-control show-tick" data-live-search ="true" data-size="5" title="请选择">
<option value="" title="请选择">请选择</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
添加和删除事件
绑定添加和删除事件
- clone() 复制一个元素
- append() 在元素后面追加一个新的元素
- remove() 移除元素
<script>
// 添加
$("#cards").on("click", ".glyphicon-plus", function () {
// clone() 复制上一个div.panel
var newObj = $("#cards>.panel-body>.panel:last-child").clone();
// append() 添加到元素后面
$("#cards>.panel-body").append(newObj);
var cards = $('#cards').find(".panel");
for (var i = 0; i < cards.length; i++ ){
// formset-num 重新赋值
cards.find('.formset-num').eq(i).html(i+1);
}
});
//删除
$("#cards").on("click", ".glyphicon-remove", function () {
// 判断页面中panel的数量
if ($('#cards').find(".panel").length == 1) {
$(this).attr('title', '至少有一个card')
}
else {
// remove()移除div.panel
$(this).parent().parent().parent().remove();
var cards = $('#cards').find(".panel");
for (var i = 0; i < cards.length; i++ ){
// formset-num 重新赋值
cards.find('.formset-num').eq(i).html(i+1);
}
}
});
</script>
以上是关于jquery中动态添加div, 然后在div中动态添加<a>标签和事件, 怎么样把text的值 改变成<a> 标签或者增加属性的主要内容，如果未能解决你的问题，请参考以下文章
jquery 动态添加div同时给div增加了一个id，然后想通过这个id把这个div删掉，请问需要怎么弄？