2021-12-23 睡前故事--jQuery-添加元素之append、prepend、after、before的区别

jQuery-添加元素之append、prepend、after、before的区别

小萝卜儿灵魂画师🖌上线，用下图瞎编🩸一篇睡前故事为大家分析上面这四者的区别：

【心血来潮❤写的，故事纯属瞎编，不喜勿喷哟😄】

小萝卜儿的睡前故事之第一篇~🌛

很久很久以前，在一片沙漠色森林里🌲，有两只可爱滴小兔兔🐰，一只叫小黑，一只叫小灰，它们是形影不离滴好盆友🪴，它们都有一个共同的爱好，就是吃胡萝卜儿🥕。。。

有一天，它们正开心滴在森林里分享着自己新采摘的胡萝卜儿🥕，突然，一阵阵可怕的龙卷风🌪朝它们吹来，可怜的两只小兔兔🐰被分开了，它们害怕急了😱。。。还没睡觉的小萝卜儿们🐷，让我们一起来找到它们，帮助它们回家吧！

可是，我们该怎么找到它们呢❓

巴拉啦小萝卜儿🐷，jQuery全身变~

小萝卜儿🐷：“让我们远程连接一下大家，问问它们现在在什么地方吧？”

远程连接密码：#forest {display: inline-block;}

呼叫 呼叫~嘟嘟嘟☎️

小黑🐰：“小萝卜儿们，你们好，我是小黑，为什么我叫小黑呢？因为我的皮肤黑黝黝、滑溜溜滴；我很喜欢吃胡萝卜儿🥕，但我最喜欢红色的胡萝卜哟🥕。。。”

。。。此处省略一千字✍🏻

小萝卜儿🐷：“小黑，你现在在哪呢？可以告诉我们一下吗？”

小黑🐰：“哦对啦，我现在在森林外的左山坡⛰上，大家可以马上过来接我吗？😟”

小萝卜儿🐷：“好的，我们马上过来，你站在原地⛰等我们哟。”

小黑🐰：“等一下，小萝卜儿~我最喜欢的红色胡萝卜🥕落在了森林里的左草坪上，你们可以先拯救一下它，再来救我吗？因为。。。😖我害怕它被龙卷风刮跑了，它是我最喜欢的一个红色胡萝卜🥕啦”

小黑🐰说完，伤心的哭了起来~😭

小萝卜儿🐷：“既然这样，那我们先去森林里的左草坪上解救小黑同志的红色胡萝卜儿🥕吧，接着再出发解救小黑同志。”

巴拉啦小萝卜儿🐷，jQuery全身变~

jQuery定位穿梭仪：✈️

森林🌲：<div id="forest"></div>
小萝卜儿🐷：var fairy = '<span></span>';

输入密码中~📚

解救红色胡萝卜儿🥕的密码：$('#forest').prepend(fairy);
解救小黑🐰的密码：$('#forest').before(fairy);

小黑🐰：“小萝卜儿，你们终于来啦，还解救了我最喜欢😍的红色胡萝卜儿🥕，真的很谢谢你们♪(･ω･)ﾉ。。。”

小萝卜儿🐷：“小黑同志，我想问一下，你知道小灰同志可能被吹到哪儿去了呢？我们始终联系不上它☎️。。。”

小黑🐰：“啊！怎么会呢！它。。。让我想想呢！我想想🤔，我记得，我们都被龙卷风🌪卷起来后，它被一股与我相反方向的龙卷风🌪吹走了，或许它被吹到了森林外的右山坡⛰上，我们去那找找吧~”

小萝卜儿🐷：“好滴，我们去试试吧🦶🏻~”

巴拉啦小萝卜儿🐷，jQuery全身变~

jQuery定位穿梭仪：✈️

森林🌲：<div id="forest"></div>
小萝卜儿🐷和小黑🐰：var fairy = '<span></span>';

输入密码中~📚

解救密码：$('#forest').after(fairy);

小黑🐰：“小灰，你果然在这儿，太好啦😄，我们快回家吧🏡，我在来的路上看见龙卷风🌪已经没有啦。”

小灰🐰：“呜呜呜😭~能再见到你，太好啦，小黑。。。咦，她们是谁呢？小黑。”

小萝卜儿🐷：“你好，我们叫小萝卜儿，听说这片森林被龙卷风🌪袭击，我们是特地赶来解救你们的，看见你们安然无恙，我们真的很开心呢😄”

小黑🐰：“是滴呢，多亏了她们❀呢，在她们的帮助下，我才能这么快找到你呢，小灰”。

小灰🐰：“真滴呀，那。。。小萝卜儿，我有一个不情之请😖，你们可以帮我去解救一下我最喜欢的粉色萝卜儿🥕吗？。。。我被龙卷风🌪卷起来后，那个粉色萝卜儿🥕被我不小心掉在了森林🌲里的右草坪上。。。”

小萝卜儿🐷：“没问题哟，小灰，你不要伤心啦，帮助你们本就是我们的职责呢~😄”

巴拉啦小萝卜儿🐷，jQuery全身变~

jQuery定位穿梭仪：✈️

森林：<div id="forest"></div>
小萝卜儿和小黑🐰、小灰🐰：var fairy = '<span></span>';

输入密码中~📚

解救密码：$('#forest').append(fairy);

小萝卜儿🐷拿起掉在草坪上的粉色萝卜儿🥕：“小灰，给你，你最喜欢的粉色萝卜儿🥕~”

小灰🐰：“谢谢你们，小萝卜儿~😄”

小黑🐰：“对呀，真的很谢谢你们，小萝卜儿❀”

小萝卜儿🐷：“It’s my pleasure~😄”

最后の，两只小兔兔🐰在小萝卜儿的护送下快快乐乐滴回家🏡啦。。。那么，今天的睡前故事到这里也结束啦~👋🏻

每一位依旧在为梦想⭐️而奋斗滴小萝卜儿们🐷，晚安咯~祝个好梦哟🌛

知识点总结：

一、在元素的里面添加用append和prepend：

1、在元素里面的前面添加用prepend;
2、在元素里面的后面添加用append;

二、在元素的外面添加用after和before：

1、在元素外面的前面添加用before;
2、在元素外面的后面添加用after;