前面我们所学的几个方法，是让元素发生某种变化。现在我们来研究如何向页面中添加新的元素。
聪明的宝宝们已经发现了，我们使用 html 方法就可以向页面中添加新的元素。因为可以直接改变某个元素中的代码，如果我们改变 body 元素中的代码，甚至改变 html 元素中的代码，岂不是很随心所欲的么。
但是这不便捷，我们使用 jQuery 不就是图个方便嘛，所以今天来讲一些更加直接的方法。
首先我们要有一个网页，网页中有一个元素：
<body><div id="box"></div></body>简单写一下，大家理解就好了。接下来写 JQ 部分，我们都是选中当前这个元素（#box），然后进行添加操作：
$('#box').before('<p>这是使用 before 方法添加的元素</p>');$('#box').after('<p>这是使用 after 方法添加的元素</p>');$('#box').prepend('<p>这是使用 prepend 方法添加的元素</p>');$('#box').append('<p>这是使用 append 方法添加的元素</p>');各种基础结构或者事件的触发，大家自己去补全。这里我们没有做讲解，直接给出了四种方法，可以说是非常生硬的灌输了。
可是这有什么呢？代码的主要部分都已经写在这里了，你要做的仅仅是补全结构，运行，然后通过开发者工具查看效果。
而这 4 个单词，有两个是你一定认识的吧？
反正就是在当前选中的这个元素之前，之后添加后面括号中的内容。
再有就是在当前选中的这个元素里面的最前面或者最后面，添加括号中的内容。
要注意的是，这些方法做的都是添加，而不是像前面那样进行替换。
思考一个问题，我们使用的选择器都必然对应一个元素吗？肯定不是，所以我们也可以同时选中多个元素进行操作，程序会对所有符合条件的元素应用相同的操作。
比如：
<body><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p></body>$('p').warp('<div class="demo"></div>')试试看，发生了什么。它将我们给出的代码（强调，一个元素，开始标签和结束标签），套在了每一个符合前面选择器的元素的外面。
虽然我将这件事情描述出来了，但是大家读着可能比较吃力。那就说得直白一点：老板把你这里的苹果，每个外面都套一个红色的袋子。对，就是刚才我递给你的那种红色的袋子。
这样换个说法一下子就理解了呢~~
但是现在事情发生了变化，老板说你这货太矫情了，我这里 200 多个苹果，挨个装袋子，就不能够按时下班了，难道我一个卖水果的也要和你们一起 996 吗？
所以老板把所有的苹果，都装进同一个袋子里，然后递给了你。
$('p').warpAll('<div class="demo"></div>')我们都知道 all 是全部的意思。所以 warp 是装进袋子，一个一个装，就是对这一系列的元素，其中的每一个单独进行一次装入的操作。warpAll 则是一起装，把所有符合的元素一起塞进一个袋子（元素）中。
本来我就想讲这么多的，但后来看了一下，关于 warp 还有一个方法，不讲总觉得它会孤单，索性说一下吧：
$('p').warpInner('<span class="demo"></span>')首先这个没有 all，所以是一个元素一个元素进行操作的。然后它和 warp 相似又相反，warp 是将你给出的元素，套在选中的元素外侧；warpInner 是套在元素的内侧——老板，你把苹果直接装在纸箱里容易蹭着，所以在纸箱里先垫上一层泡沫，再放苹果吧。
今天一共讲了 7 个方法，用起来都很简单，我介绍一下，大家就可以拿着去使用了。
前 4 个方法，重点在于插入的位置，至于插入什么内容，都没有多大限制，不一定非要是一个元素，也可以是一段其他的代码。
后面三个方法，都是进行嵌套，要理解清楚，是把你给元素套在谁的外面，又是谁的里面。所以我们要给出的（后面小括号里的内容），也必须是一个元素。
最后，这些并不是全部的添加元素的方法，只是有一些方法和我们所讲的很类似，用到的不多又容易搞混，于是就没有讲。
暂无评论内容