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获得内容和属性方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
下面小编就为大家带来一篇jQuery插件扩展extend的简单实现原理。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了jQuery中复合属性选择器用法,实例分析了复合属性选择器匹配同时满足多个属性条件元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了jQuery中unwrap()方法用法,实例分析了unwrap()方法的定义、功能及移除匹配元素父元素的使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了jquery一键控制checkbox全选、反选或全不选，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
jquery ajax return没有返回值的解决方法，需要的朋友可以参考下。2011-10-10
下面就日常最常用的，在Form表单中如何获取被中选的Radio值做一小小的示例，感兴趣的朋友可以参考下2013-08-08
表单作为 HTML 最重要的一个组成部分，几乎在每个网页上都有体现，例如用户提交信息、用户反馈信息和用户查询信息等，因此它是网站管理者与浏览者之间沟通的桥梁。下面通过实例代码给大家介绍jQuery 实现表单验证功能2017-07-07
jQuery改变form表单的action,并进行提交的实现代码
下面小编就为大家带来一篇jQuery改变form表单的action,并进行提交的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
empty、remove和detach三者都有把元素移除的作用，但细微的差别，造就了它们的使命不同。下面给大家介绍jQuery中的empty、remove和detach的区别，感兴趣的朋友一起学习吧2016-04-04
最新评论