第一百一十九章 添加元素

前面我们所学的几个方法,是让元素发生某种变化。现在我们来研究如何向页面中添加新的元素。

聪明的宝宝们已经发现了,我们使用 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 个方法,重点在于插入的位置,至于插入什么内容,都没有多大限制,不一定非要是一个元素,也可以是一段其他的代码。

后面三个方法,都是进行嵌套,要理解清楚,是把你给元素套在谁的外面,又是谁的里面。所以我们要给出的(后面小括号里的内容),也必须是一个元素。

最后,这些并不是全部的添加元素的方法,只是有一些方法和我们所讲的很类似,用到的不多又容易搞混,于是就没有讲。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第一百一十九章 添加元素

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏