当前位置:

JQuery如何给指定元素前、中、后添加内容

在实现网站制作过程中,往往需要通过JQuery给指定元素添加内容,例如给网站导航菜单上有下拉菜单的项目添加一个小三角形,给链接地址添加参数等等,都需要使用JQuery来实现。

JQuery如何给指定元素前、中、后添加内容

下面学做网站论坛介绍几种JQuery给指定元素前、后、中添加内容的方法和代码。

第一种:JQuery给指定元素前面添加内容

JQuery给指定元素前添加内容要使用:before(),代码如下:


$("选择器").before('要添加的内容');

第二种:JQuery给指定元素后面添加内容

JQuery给指定元素后面添加内容要使用:after(),代码如下:


$("选择器").after('要添加的内容');

第二种:JQuery给指定元素中间添加内容

JQuery给指定元素中间添加内容要使用:append(content)方法,代码如下:


$("选择器").append('要添加的内容');

append(content)方法的功能是向指定的元素中追加内容,被追加的content参数,可以是字符、HTML元素标记,还可以是一个返回字符串内容的函数。

例如,在页面的<body>元素中追加一个具有“id”、“title”属性和显示内容的<div>元素,如下图:

JQUERY 添加内容

显示效果:

JQUERY 添加内容

从图中可以看出,由于使用append()方法在<body>元素中追加了一些HTML 元素标记,因此追加后,这些元素标记直接生成对应的元素和属性显示在页面中。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程

  • 有学建网站同学在做视频教程网站,一个教程中会有很多节课程,为了方便用户点击,会将所以课程放在视频右侧。这时需要达到用户点击某节课程时,屏幕滚
  • 很多网站都有"运行代码"功能,要实现这种功能其实并不难。在网页中加上一段JS代码即可。效果如下图:网页"运行代码"功能JS代码:(你如果是Wordpres
  • 为了让手机用户浏览网站的方便,我们做网站时,会做响应式自适应网站。可以自动判断用户浏览设备进行转换网站版面。如果用户使用手机浏览就跳转到手机
  • 这是一款jquery图片轮播图,适合新手学做网站学员使用,只要按照以下的方法操作,就可以将一款好看的jquery图片轮播图放到自己做的网站上了。先看下
  • 有些网站上会有连续向上滚动展示版块,可以不停的滚动展示信息,当鼠标停留在上面时就停止,离开时又继续滚动。常用于企业网站的公司新闻展示,门户网
  • 在之前的建站教程中,我们讲了如何制作网页滚动显示效果,方法见:网站animite动画载入效果制作步骤,通过 WOW.js 制作滚动动画。今天给大家介绍另一
  • 在自己做网站时,为了节省版面,往往需要在某个版块使用向上无限循环滚动来展示内容。怎么样写这样的文字向上无限循环滚动代码呢?下面学做网站论坛分
  • 在制作一些拥有二级代理网站时,二级代理网站与主站内容相同,但要求URL不一样。这时我们可以使用JQuery 自动给网页中所有链接添加动态参数的方法给每
  • 在前面的Dreamweaver CS6视频教程中,我们介绍了Dreamweaver锚点链接制作方法,锚点链接在实际做网站过程中也会经常用到。但锚点链接有一个缺点,就是
  • JS实现点击按钮清空DIV里内容是做网站时经常用到,可以实现点击某个按钮就清除指定DIV里的内容。就是通过在js中获得div对象,设置对象的innerHTML属性