jQuery添加新内容的四个常用方法分析【append，prepend，after，before】
更新时间：2019年03月19日 10:16:11 作者：白杨-M
这篇文章主要介绍了jQuery添加新内容的四个常用方法,结合实例形式分析了jQuery元素添加append，prepend，after，before四种方法的功能与相关使用技巧,需要的朋友可以参考下
本文实例讲述了jQuery添加新内容的四个常用方法。分享给大家供大家参考，具体如下：
添加新内容的四个 jQuery 方法区别如下：
append() - 在被选元素（里面）的结尾插入内容
prepend() - 在被选元素（里面）的开头插入内容
//jQuery append() 方法在被选元素的结尾插入内容。
$("p").append("Some appended text.");
//jQuery prepend() 方法在被选元素的开头插入内容。
$("p").prepend("Some prepended text.");
通过 append() 和 prepend() 方法添加若干新元素
function appendText()
{
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // 追加新元素
}
after() - 在被选元素（外面）之后插入内容
before() - 在被选元素（外面）之前插入内容
$("img").after("Some text after");
$("img").before("Some text before");
通过 after() 和 before() 方法添加若干新元素
function afterText()
{
var txt1="<b>I </b>"; // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建新元素
var txt3=document.createElement("big"); // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素
}
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
相关文章
下面小编就为大家带来一篇jQuery基础知识点总结(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了jQuery中的jQuery()方法用法,以实例形式较为详细的分析jQuery()方法的四种常见语法结构与用法技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了jquery操作checkbox,需要的朋友可以参考下2014-07-07
最近研究了一下jQuery，觉得真的是一个很不错的js库，其他的不说，关键是有翔实的文档，这点是非常关键的。2009-06-06
下面小编就为大家带来一篇浅析jquery数组删除指定元素的方法:grep()。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章介绍了JS+CSS实现图片预加载与背景图上中下切图的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
jquery获取input type=text中的值的各种方式(总结)
下面小编就为大家带来一篇jquery获取input type=text中的值的各种方式(总结)。小编觉的挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
这篇文章主要介绍了Jquery实现纵向横向菜单的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了jQuery对象和DOM对象之间相互转换的方法介绍,本文讲解了jQuery对象转成DOM对象、DOM对象转换成jQuery对象 方法,需要的朋友可以参考下2015-02-02
这篇文章主要为大家详细介绍了jquery插件实现代码雨特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
最新评论