jquery添加html元素

最新推荐文章于 2023-01-08 18:23:29 发布

blog-lichuyan

最新推荐文章于 2023-01-08 18:23:29 发布

阅读量3.8k

点赞数

分类专栏： JS html CSS

本文链接：https://blog.csdn.net/qq_38643776/article/details/81704548

版权

CSS 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
     .blue{
            color:blue
        }
    </style>
</head>
<body>

<!-- jq 添加html和样式-->
<p class="p1" >添加1</p>
<p class="p2">添加2</p>
<p class="p3">添加3</p>
<button id="btn1">添加html</button>
<button id="btn2">添加css样式</button>
<button id="btn3">添加html和css样式</button>

<!--<p style="color: #006699;height: 16px">添加3要添加的内容</p>   直接把这段代码赋值到 $(".p3").append("")中就行，-->
<script type="text/javascript">
    $(document).ready(function(){
      var  a="<p style=\"color: #006699;height: 16px\">添加3要添加的内容</p>\n"

        $("#btn1").click(function(){
            $(".p1").append("<b>Hello</b>");
        });
        $("#btn2").click(function(){
            $(".p2").addClass("blue");
        });
        $("#btn3").click(function(){
            $(".p3").append("<p style=\"color: #006699;height: 16px\">添加3要添加的内容</p>\n");
        });
        $("#btn3").click(function(){
            $(".p3").append(a);
        });


    });
</script>
</body>
</html>

添加css和html：

html:

<div id="up"></div>

<button nz-button nzType="primary" (click)="search()">搜索</button>

ts:

style=' <style type="text/css">\n' +
    '     .blue{\n' +
    '            color:blue\n' +
    '        }\n' +
    '    </style>'
move
search(){
    // css + html
    this.move=this.style+"<label class='blue'>这是你动态添加的内容</label>"
    $("#up").append(this.move);
}

注意：css里的类名要和html的类名一致，如何写出这样格式的数据。

css：在普通<style></style>写好后复制到ts里

html：在html里写好复制到ts里就好

blog-lichuyan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery添加html元素

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="https://cdn.bootcss.com/jquery
复制链接

扫一扫

专栏目录