品易云推流 关闭
文章详情页
文章 > JavaScript > 使用jquery添加元素的方法

使用jquery添加元素的方法

jsjquery添加元素

头像

宋雪维

2021-03-23 18:17:1810450浏览 · 0收藏 · 0评论

jquery作为JavaScript中很重要的框架,可以满足JavaScript中复杂代码简易化的需求,而且也可以处理JavaScript中不能解决得问题。例如jquery根据不同的方法可以在指定的元素的不同位置添加合适的元素。本文介绍使用jquery添加元素的四种方法:1、append()方法在被选元素内部的结尾插入指定内容;2、prepend()方法在被选元素内部的开头插入指定内容;3、after()方法在被选元素之后插入内容;4、before()方法在被选元素之前插入内容。

1、append()方法:在被选元素内部的结尾插入指定内容

$(“p”).append(“在被选元素的末尾插入内容”);

使用实例

$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

2、prepend()方法:在被选元素内部的开头插入指定内容

$(“p”).prepend(“在被选元素的开头插入内容”);

使用实例

$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").prepend("<b>Prepended text</b>. ");
  });

3、after()方法:在被选元素之后插入内容

$(“button”).after(“在后面添加文本”);

使用实例

$("#btn2").click(function(){
    $("p").after("<b>这是after插入的段落</b>");
});

4、before()方法:在被选元素之前插入内容

$(“button”).before(“在前面添加文本”);

使用实例

$("#btn1").click(function(){
    $("p").before("<b>这是before插入的段落</b>");
});

以上就是jquery添加元素的四种方法,大家一定一套根据添加的具体需求选择合适的方法哦~更多JavaScript学习推荐:JavaScript教程

本文教程操作环境:windows7系统、jquery3.2.1版本,DELL G3电脑。

关注

关注公众号,随时随地在线学习

本教程部分素材来源于网络,版权问题联系站长!

底部广告图