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