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}列`; } } }
