如何使用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是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。
看完上述内容,你们掌握如何使用jQuery添加新内容的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。