<!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里就好