用jq添加或移除div

问题分析：

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

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

举例如下：

以内部追加方法append为例。

添加DIV：

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

删除刚刚添加的DIV：

$('#name').remove()

利用jq的append()追加函数即可实现，如：

html：

<div class="main">

    <input type="button" value="添加" class="btn" />

</div>

JQ：

$(document).ready(function(){

    $(".btn").click(function(){

        var html = '<div style="width:200px height:30px border:1px dashed red margin-bottom:20px"></div>'

        $(".main").append(html)

    })

})

使用 after 方法可以实现这种效果。

例如，我想在第2个DIV的后面动态去添加一个DIV,该如何实现?

html 代码：

<div id="parent">

    <div id="one">1</div>

    <div id="two">2</div>

    <div id="three">3</div>

</div>

Js 代码：

$(function(){

    $("#two").after("<div>我是新添加的内容</div>")

    //选择 ID 为 #two 的 DIV 节点，在其后边添加一个 DIV 节点

})

先掌握这种方法，然后再探究其他更多实现方式。

---