jq添加移除元素

最新推荐文章于 2020-11-29 09:10:14 发布

伏见伊奈里

最新推荐文章于 2020-11-29 09:10:14 发布

阅读量1.3k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_35313994/article/details/53130073

版权

JavaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

<!DOCTYPE html>
<html>
<head>
<style>
ol{
border:1px solid #333;}
.aa{
color:red;
}
.bb{
color:purple;
}
.cc{
color:yellow;
}
.dd{
color:blue;
}
.ee{
color:green;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn2").click(function(){
    $("ol").append('<li class="bb">bb</li>');
    $("ol").prepend('<li class="cc">cc</li>');
    $("ol").after('<li class="dd">dd</li>');
    $("ol").before('<li class="ee">ee</li>');
  });
});
</script>
</head>
<body>
<ol>
<li class="aa">List item 1</li>
<li class="aa">List item 2</li>
<li class="aa">List item 3</li>
</ol>
<button id="btn2">追加列表项</button>
</body>
</html>

伏见伊奈里

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
jq添加移除元素

添加新的 HTML 内容我们将学习用于添加新内容的四个 jQuery 方法：append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 &lt...
复制链接

扫一扫