JQuery 的添加元素

最新推荐文章于 2024-08-15 19:25:35 发布

GuanJINP

最新推荐文章于 2024-08-15 19:25:35 发布

阅读量215

点赞数

分类专栏： jquery 文章标签： jquery jquery添加元素添加元素

本文链接：https://blog.csdn.net/weixin_42617075/article/details/82019117

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JQuery 的添加 (导入jquery.js 文件和自己的js文件)，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery添加元素</title>
    <script src="jquery.min.js"></script>
    <script src="addContent.js"></script>
</head>
<body>
<p id="p1">你好 这是jQery 添加元素</p>
<!-- 通过按钮触发p1-->
<button id="bhtml">按钮</button>
<p id="p2">你好 这是jQery 添加元素</p>
<!-- 通过按钮触发p2-->
<button id="bhtml2">按钮2</button>
<button onclick="appendText()">按钮3</button>
</body>
</html>

js 文件

/*
* 添加的方法比较多,如下面所示
* 1.  append   在被选中的结尾插入元素
* 2. prepend    在被选中的话开头插入内容
* 3. before     在被选中的话开头插入内容
* 4. after       在被选中的结尾插入元素
* */
$(document).ready(function () {
    $("#bhtml").click(function () {
        $("#p1").append("this a boy ");
    });
});
// $(document).ready(function () {
//     $("#bhtml").click(function () {
//         $("#p1").prepend("this a boy ");
//     });
// });
//  before 是可以换行，
$(document).ready(function () {
    $("#bhtml2").click(function () {
        // $("#p2").before("sadasdsadasad");
        $("#p2").after("sadasdsadasad");
    })
})
// 如何添加元素，最追加内容
function appendText() {
//    可以添加 html jquery dom
    var text1="<p>你好</p>"
    //jq
    var text2=$("<p></p>").text("黄金甲")
    //dom
    var text3=document.createElement("p");
    text3.innerHTML="满城尽带黄金甲";
    // 可以内容最加到body中
    $("body").append(text1,text2,text3);
}