1. document.write(“标签的代码及内容”)-–>缺陷: 页面上静态结构会被全部覆盖
document.write("<p>这是一个p标签</p>");
2. 对象.innerHTML = “标签及内容”;
my$("box").innerHTML = "<h1>大标题</h1>"
点击动态创建列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">点击</button>
<div id="box"></div>
<script src="common.js"></script>
<script>
var names = ["杨过", "小龙女", "张无忌", "张三丰"];
my$("btn").onclick = function () {
var str = "<ul>";
//根据循环拼接li
for(var i = 0 ; i < names.length ; i++){
str += "<li>" + names[i] + "</li>";
}
str += "</ul>";
console.log(str);
my$("box").innerHTML = str;
//当代码执行到这里, 说明列表已经创建成功
var list = ele$("li");
for(var j = 0 ; j <list.length ; j++){
list[j].onmouseover = function () {
this.style.backgroundColor = "pink";
}
list[j].onmouseout = function () {
this.style.backgroundColor = "";
}
}
}
</script>
</body>
</html>
3. document.createElement("标签名);
- 创建元素:
- 创建—>document.createdElement(“标签名”);
- 追加到父级元素的末尾–>父对象.appendChild(“创建的子对象”)
var count = 0;
my$("btn").onclick = function () {
count++;
var obj = document.createElement("h1")
//设置文本内容
obj.innerText = "标题标签"+count;
//放到父元素的末尾
my$("box").appendChild(obj);
}
点击动态创建列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">点击</button>
<div id="box"></div>
<script src="common.js"></script>
<script>
var flag = true;//当成是一个开关. 默认是开着的
my$("btn").onclick = function () {
if(flag){
//立马把开关关了
flag = false;
//1.创建ul并添加到父元素的末尾
var ulObj = document.createElement("ul");
my$("box").appendChild(ulObj);
for(var i = 0 ; i < names.length ; i++){
//创建li, 并添加到ul里面
var liObj = document.createElement("li");
liObj.innerText = names[i];
ulObj.appendChild(liObj);
}
}
</script>
</body>
</html>