2025年03月02日
Js基础3:节点创建_js创建节点的方式有哪些
1、document.write 创建
document.write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。
html和css代码
?
JavaScript代码
?//document.write("标签代码及内容");
?get_id("btn").onclick=function?() {
??? ?document.write("这是一个p
");//会重写
?};
2、innerHTML 创建
语法：
?// 某个元素节点中间插入一段HTML代码
?element.innerHTML=HTML
案例：动态添加列表项
?
?添加
?
?
?get_id("btn").onclick?=?function(){
??? ?var?txt?=?get_id("txt").value;
??? ?console.log(txt);
??? ?get_id("box").innerHTML?=??get_id("box").innerHTML?+?` ${txt}?`
??? ?get_id("txt").value?=?"";
?}
案例：动态创建列表
?创建列表
?
?
??var?names?=?["杨过",?"郭靖",?"张无忌",?"张三丰",?"乔峰",?"段飞",?"丁棚"];
??get_id("btn").onclick?=?function?() {
??? ??// 将整个列表看成一个字符串，先创建开头的ul
??? ??var?str?=?"
";
??? ??// 根据数据遍历循环创建li
??? ??for?(var?i?=?0;?i?${names[i]}`;
??? ? }
??? ??str?+=?"
"
??? ??console.log(str);
??? ??get_id("dv").innerHTML?=?str;
??}
3、createElement 创建
语法：
?// 第一步、先创建元素节点
?chlidNode?=?document.createElement("p");
?// 第二步，把元素追加到父级元素中
?parentNode.appendChild(chlidNode);
案例：动态创建列表
?创建列表
?
?
?var?names?=?["杨过",?"郭靖",?"张无忌",?"张三丰",?"乔峰",?"段飞",?"丁棚"];
?get_id("btn").onclick?=?function?() {
??? ?// 先创建元素ul
??? ?var?box?=?document.createElement("ul");
??? ?// 遍历循环数据，创建li
??? ?for(var?i=0;i
案例：动态创建表格
html和css代码
?
?
?
?
??? ?
??? ?
??? ?Document
??? ?
?
?
?
??? 行：
??? 列：
??? ?点击创建表格
?
?
?