通过JavaScript动态给HTML插入节点

最新推荐文章于 2024-04-21 15:25:48 发布

JR.Zhang

最新推荐文章于 2024-04-21 15:25:48 发布

阅读量2.9k

点赞数

分类专栏：个人总结引用和渗透

本文链接：https://blog.csdn.net/weixin_44543135/article/details/90612571

版权

个人总结同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

引用和渗透

38 篇文章 0 订阅

订阅专栏

通过JavaScript动态给HTML插入节点

我们有时候处理业务时需要通过脚本代码动态地去给HTML添加节点，以便形象地显示到页面上，就比如说我们的医院病房的床位；酒店的餐位；停车场的车位，我们需要动态改变他们的状态，数量的等；通过不同颜色来表示其颜色。要通过JavaScript给HTML添加节点就要用到append()与appendTo();
1、 append(content|fn):向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
appendTo(content):把所有匹配的元素追加到另一个指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中
简单的总结就是：
.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同
append()前面是被插入的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容，而后面是被插入的对象
下面是一个简单的实例：
HTML代码：

 <html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ChapterTwoInternal</title>
    <link href="~/Content/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container text-center">
        <button class="btn btn-primary" id="btnAppend">点击通过jQuery的append添加DOM</button>
        <button class="btn btn-primary" id="btnAppendTo">点击通过jQuery的appendTo添加DOM</button>
        <div class="divContainer" id="content">
            <a href="#" class="redColor">DOM内部插入append()与appendTo()</a>
            @*<p class="setFont">这是一个段落标签</p>*@
        </div>
    </div>
<script src="~/Content/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
<script>
    //btnAppend按钮的点击事件
        $("#btnAppend").click(function () {
            //$(A).append(B); A? B? 提问
            $("#content").append("<div style='width:80px; height:50px; background:red; margin-top:5px '>" + 
                "<p class='setFont' style='color:white'>myDom</p>"
               + "</div>");
        });
        //btnAppendTo按钮的点击事件
        $("#btnAppendTo").click(function () {
            //$(A).append(B); A? B? 提问
            $("<div style='width:80px; height:50px; background:red; margin-top:5px '>" + "<p class='setFont' style='color:white'>myDom</p>" + "</div>").appendTo($("#content"));
        });
</script>

页面结果显示：
在这里插入图片描述
这是通过JavaScript在指定元素末尾追加DOM的，除此之外还有通过在元素开头添加DOM的方法，主要通过prepend()与prependTo()来添加，其使用方法和append()和appendTo()一样，JavaScript代码如下：

  //btnPrepend按钮的点击事件
        $("#btnPrepend").click(function () {
            //.prepend()方法添加
            $("#content").prepend("<div style='width:80px; height:50px; background:red; margin-top:5px '>" +
                "<p class='setFont' style='color:white'>myDom</p>"
               + "</div>");
        });
        //btnPrependTo按钮的点击事件
        $("#btnPrependTo").click(function () {
            //.prependTo()方法添加
            $("<div style='width:80px; height:50px; background:red; margin-top:5px '>" +   "<p class='setFont' style='color:white'>myDom</p>"
        + "</div>").prependTo($("#content"));
        });

页面显示效果如图所示：
在这里插入图片描述
对比可以看出这是在元素前面添加DOM的，所以我们要实现动态添加dom可以通过实际项目测试，通过查询一个数据库的数据返回到后台再通过JavaScript添加到HTML中。

JR.Zhang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
通过JavaScript动态给HTML插入节点

通过JavaScript动态给HTML插入节点我们有时候处理业务时需要通过脚本代码动态地去给HTML添加节点，以便形象地显示到页面上，就比如说我们的医院病房的床位；酒店的餐位；停车场的车位，我们需要动态改变他们的状态，数量的等；通过不同颜色来表示其颜色。要通过JavaScript给HTML添加节点就要用到append()与appendTo();1、 append(content|fn):向每...
复制链接

扫一扫