Js基础3:节点创建（js创建节点的方式有哪些）
文章标签：
html节点
1、document.write 创建
document.write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。
html和css代码
<input type="button" value="创建一个p" id="btn"/>JavaScript代码
//document.write("标签代码及内容");
get_id("btn").onclick=function () {
document.write("<p>这是一个p</p>");//会重写
};2、innerHTML 创建
语法：
// 某个元素节点中间插入一段HTML代码
element.innerHTML=HTML案例：动态添加列表项
<input id="txt" type="text">
<button id="btn">添加</button>
<ul id="box"></ul>
get_id("btn").onclick = function(){
var txt = get_id("txt").value;
console.log(txt);
get_id("box").innerHTML = get_id("box").innerHTML + `<li> ${txt} </li>`
get_id("txt").value = "";
}案例：动态创建列表
<button id="btn">创建列表</button>
<div id="dv"></div>
var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"];
get_id("btn").onclick = function () {
// 将整个列表看成一个字符串，先创建开头的ul
var str = "<ul>";
// 根据数据遍历循环创建li
for (var i = 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);案例：动态创建列表
<button id="btn">创建列表</button>
<div id="dv"></div>
var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"];
get_id("btn").onclick = function () {
// 先创建元素ul
var box = document.createElement("ul");
// 遍历循环数据，创建li
for(var i=0;i<names.length;i++){
var li = 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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border: 1px solid black;
border-spacing: 0;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
行：<input type="text" id="row"><br>
列：<input type="text" id="col"><br>
<button id="btn">点击创建表格</button>
</body>
</html>JavaScript代码
//创建表格
var otab = document.createElement("table");
// 直接将表格插入到body中
document.body.appendChild(otab);
get_id("btn").onclick = function () {
var rowVal = Number(get_id("row").value);
var colVal = Number(get_id("col").value);
//创建tr 行
for (var i = 0; i < rowVal; i++) {
var otr = document.createElement("tr")
otab.appendChild(otr);
// 创建td 列
for (var j = 0; j < colVal; j++) {
var otd = document.createElement("td")
otr.appendChild(otd);
otd.innerText = `我是第${i+1}行${j+1}列`;
}
}
}