jquery怎么让append添加的内容放在最前面

jquery怎么让append添加的内容放在最前面,第1张

append()方法默认是添加到指定元素的最后的。

可以采用如下方式将内容添加到元素的最前面。

使用after()方法,在匹配的元素之后添加内容。

获取到容器的第一个元素,然后使用insertBefore()方法,将内容添加到该元素之前。

1、创建html页面,打开记事本,输入如下截图所示的html代码,将文件保存为html结尾的文件,例如JsTest.html。

2、上一步保存完成后,双击文件即可使用默认浏览器运行页面,如果想使用指定浏览器运行,右键文件,选择【打开方式】->挑选任一已经安装的浏览器即可。

3、原生JS方式,详细代码与注释见截图。

4、原生JS方式,运行效果如下。

5、Jquery方式,必须要引入jquery文件才能使用,此处将jquery下载下来放到Content文件夹中,新的目录结构如下

-- Content

-- jquery-1.11.3.min.js

-- JsTest.html

6、Jquery方式,详细代码与相关注释见截图。

7、Jquery方式,运行效果如下。

本文实例讲述了jQuery使用before()和after()在元素前后添加内容的方法。分享给大家供大家参考。具体如下:

<!DOCTYPE

html>

<html>

<head>

<script

src="js/jquery.min.js">

</script>

<script>

$(document).ready(function(){

$("#btn1").click(function(){

$("img").before("<b>Before</b>")

})

$("#btn2").click(function(){

$("img").after("<i>After</i>")

})

})

</script>

</head>

<body>

<img

src="/images/w3jquery.gif"

alt="jQuery"

width="100"

height="140">

<br><br>

<button

id="btn1">Insert

before</button>

<button

id="btn2">Insert

after</button>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/8019419.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-12
下一篇2023-04-12

发表评论

登录后才能评论

评论列表(0条)

    保存