1.使用createElement(“标签名”)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.red {
width: 300px;
height: 300px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function (ev) {
//第一步:创建一个div元素对象
var div = document.createElement("div")
//第二步,给div添加样式
div.setAttribute("class", "red")
//第三步,将div添加到body里面
document.body.appendChild(div)
}
</script>
</head>
<body>
</body>
2.使用innerhtml添加
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.red {
width: 300px;
height: 300px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function (ev) {
//将body里面的html代码修改为如下
document.body.innerHTML="<div class='red'></div>"
}
</script>
</head>
<body>
</body>
3.document.write(“html代码”)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function (ev) {
document.write("<p>djsjl</p>")
}
</script>
</head>
<body>
</body>