网站首页 > 技术文章正文

Js基础3:节点创建

nanyue 2025-05-15 20:05:41 技术文章 2 ℃

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

网站首页 > 技术文章 正文

Js基础3:节点创建

猜你喜欢

网站首页 > 技术文章正文