jQuery中文档处理的内部插入

最新推荐文章于 2024-08-08 14:39:02 发布

疾风狼w

最新推荐文章于 2024-08-08 14:39:02 发布

阅读量108

点赞数

分类专栏：笔记文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_44361336/article/details/104614503

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

后插入

append
append

前插入

prepend
prependTo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加</title>
    <script src="../../jquery-1.8.2.min.js"></script>
    <script>
        $(function () {
            // 前添加
            $(".bc01").click(function () {
                // alert("click me!");
                var text = $("input:text").val();
                // alert(text);
                // 后添加
                // $("ul").append("<li>"+text+"</li>");
                $("<li>" + text + "</li>").appendTo("ul");
                $("input:text").val("");
            });
            // 后添加
            $(".bc02").click(function () {
                // alert("click me!");
                var text = $("input:text").val();
                // alert(text);
                // 后添加
                // $("ul").prepend("<li>"+text+"</li>");
                $("<li>" + text + "</li>").prependTo("ul");
                $("input:text").val("");
            });
        });
        
    </script>
</head>
<body>
    <ul>
        <li>James</li>
        <li>Kuri</li>
    </ul>
    <input type="text">
    <button class="bc01">postadd</button>
    <button class="bc02">beforeadd</button>

</body>
</html>

未添加
后添加
前添加

疾风狼w

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中文档处理的内部插入

后插入appendappend前插入prependprependTo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>添加</title> <script src="../../jquer...
复制链接

扫一扫

专栏目录