如何动态添加和删除一个div

：添加删除Div，有很多种方法。下面具一个简单的方法。 通过修改html内容来 *** 作 var oBtn = document.getElementById('btn')var oBox = document.getElementById('div-box')oBtn.onclick = function () { var html = ''

问题分析：

1、删除：使用jQuery的remove方法。

2、添加：使用jQuery的append、after等多个方法，这些不同的方法是用来决定标签添加的相对位置。

举例如下：

以内部追加方法append为例。

添加DIV：

$('body').append('<div id="name">我是被添加的DIV标签</div>')

删除刚刚添加的DIV：

$('#name').remove()

使用bootstrap 3，那就简单了，应为bootstrap3已经内置支持该功能。

我们只需要用data-href代替href，如下所示：

<a href="#" data-href="delete.php?id=23" data-toggle="modal" data-target="#confirm-delete">删除记录 #23</a>

<button class="btn btn-default" data-href="/delete.php?id=54" data-toggle="modal" data-target="#confirm-delete">

删除记录 #54

</button>

#confirm-delete指向HTML中的模式框(modal)代码，例如：

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

请确认

</div>

<div class="modal-body">

确认删除该记录吗？

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>

<a class="btn btn-danger btn-ok">删除记录</a>

</div>

</div>

</div>

</div>

然后添加一点javascript代码即可：

$('#confirm-delete').on('show.bs.modal', function(e) {

$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'))

})

Bootstrap 2.3

对于2.3版本的bootstrap,代码应该是这样的：

$('#modal').on('show', function() {

var id = $(this).data('id'),

removeBtn = $(this).find('.danger')

removeBtn.attr('href', removeBtn.attr('href').replace(/(&|\?)ref=\d*/, '$1ref=' + id))

})

---