1、document.write 创建
document.write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。
html和css代码
<inputtype="button"value="创建一个p"id="btn"/>
JavaScript代码
//document.write("标签代码及内容");
get_id("btn").onclick=function() {
document.write("<p>这是一个p</p>");//会重写
};
2、innerHTML 创建
语法：
// 某个元素节点中间插入一段HTML代码
element.innerHTML=HTML
案例：动态添加列表项
<inputid="txt"type="text">
<buttonid="btn">添加</button>
<ulid="box"></ul>
get_id("btn").onclick=function(){
vartxt=get_id("txt").value;
console.log(txt);
get_id("box").innerHTML=get_id("box").innerHTML+`<li> ${txt}</li>`
get_id("txt").value="";
}
案例：动态创建列表
<buttonid="btn">创建列表</button>
<divid="dv"></div>
varnames=["杨过","郭靖","张无忌","张三丰","乔峰","段飞","丁棚"];
get_id("btn").onclick=function() {
// 将整个列表看成一个字符串，先创建开头的ul
varstr="<ul>";
// 根据数据遍历循环创建li
for(vari=0;i<names.length;i++) {
str+=`<li>${names[i]}</li>`;
}
str+="</ul>"
console.log(str);
get_id("dv").innerHTML=str;
}
3、createElement 创建
语法：
// 第一步、先创建元素节点
chlidNode=document.createElement("p");
// 第二步，把元素追加到父级元素中
parentNode.appendChild(chlidNode);
案例：动态创建列表
<buttonid="btn">创建列表</button>
<divid="dv"></div>
varnames=["杨过","郭靖","张无忌","张三丰","乔峰","段飞","丁棚"];
get_id("btn").onclick=function() {
// 先创建元素ul
varbox=document.createElement("ul");
// 遍历循环数据，创建li
for(vari=0;i<names.length;i++){
varli=document.createElement("li");
// 写入文本
li.innerText=names[i];
// 每一次遍历都将li追加进ul中
box.appendChild(li);
}
console.log(box);
// 盒子追加元素ul
get_id("dv").appendChild(box);
}
案例：动态创建表格
html和css代码
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border:1pxsolidblack;
border-spacing:0;
}
td{
border:1pxsolidblack;
}
</style>
</head>
<body>
行：<inputtype="text"id="row"><br>
列：<inputtype="text"id="col"><br>
<buttonid="btn">点击创建表格</button>
</body>
</html>
JavaScript代码
//创建表格
varotab=document.createElement("table");
// 直接将表格插入到body中
document.body.appendChild(otab);
get_id("btn").onclick=function() {
varrowVal=Number(get_id("row").value);
varcolVal=Number(get_id("col").value);
//创建tr 行
for(vari=0;i<rowVal;i++) {
varotr=document.createElement("tr")
otab.appendChild(otr);
// 创建td 列
for(varj=0;j<colVal;j++) {
varotd=document.createElement("td")
otr.appendChild(otd);
otd.innerText=`我是第${i+1}行${j+1}列`;
}
}
}