百度360必应搜狗淘宝本站头条
外键约束 oraclephp简单源码宏程序代码一览表唯一索引 oraclecss教程文字移动
当前位置：网站首页 > 技术资源 > 正文

Js基础3:节点创建（js节点类型有哪些）

moboyou 2025-07-12 03:46 3 浏览

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

相关推荐

Node.js 获取文件信息及路径（node.js怎么获取当前文件路径）

获取文件信息每个文件都有一组细节，我们可以使用Node.js进行检查。特别是使用fs模块提供的stat（）方法。constfs=require('fs');fs.stat(&#...

深入剖析JavaScript中深浅拷贝（js实现深浅拷贝）

大家好，我是Echa。最近有一位00后的小妹妹粉丝私信小编说自己很喜欢编程，目前在某公司实习前端开发工作，说到现在为止还没有搞懂JavaScript中深拷贝和浅拷贝这个问题，同时也在网上看了很多关于深...

为什么高手写 JS 总是又快又好?这10个技巧你要知道

大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！JavaScript是前端开发的重要语言...

IT技术栈:Javascript神器，URL.createObjectURL()

URL.createObjectURL()是JavaScript中的一个方法，用于创建一个特殊的URL，该URL可以用于将不支持直接加载的数据（如二进制数据或Blob对象）嵌入到we...

如何在 Linux 中创建和管理组?（linux如何建立组）

在Linux中，组是用户账户的集合，用于统一管理权限。每个用户至少属于一个主组（PrimaryGroup），还可以加入多个附加组（SupplementaryGroup）。组的权限设置决定了用户对文...

付费文库内容无法复制，不用任何工具，学会这4种方法轻松复制

关注职场办公，分享实用干货，洞察科技资讯，这里是「职场科技范」。我们在搜索资料的时候，看到非常有用的文库，但往往都是付费的，只能看不能复制。今天就来教大家，学会下面这4种方法，轻松复制文库内容。一、内...

node.js v24.0.0 正式发布!10大重磅更新助力开发者，性能大幅提升

近日，Node.js官方团队正式发布了Node.jsv24.0.0版本，这是一个具有里程碑意义的重大更新。作为"Current"版本，它将在未来六个月内引领Node.js...

我理解的网站产品经理之四:网站产品前端姿势

来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。2016年了，嗨，大家新年好。作为一个网页的产品经理，网页的前端知识可谓是不能不知，本文主讲网站产品的前端姿势。通常，...

五一我要看七天小说!免费开源的轻量化书库talebook搭建流程。

这次来分享一个简单阅读项目：TaleBook，项目曾用名calibre-webserver。TaleBook是一个基于Calibre的简单的个人图书管理系统，支持在线阅读。不过鉴于各种规章制度，仅...

“5 分钟 CMake 使用指南，解决我的 C++ 打包问题!”

在软件开发的世界里，构建系统扮演着至关重要的角色，它不仅决定了项目的构建效率，还直接影响到团队协作的流畅度。对于许多C++开发者而言，CMake因其强大的功能和广泛的兼容性成为了构建自动化流程的...

大佬级鬼才终于把JavaScript整理成了修仙小说，让学习变简单

这是一本讲解JavaScript编程语言的技术书籍，只不过，本书采用了一种全新的写作手法。如果你厌倦了厚厚的、如同字典般的编程书籍，不妨尝试一下新的口味，话不多说，直接上干货！目录截图：内容展示：以上...

JavaScript基础知识点总结（javascript基础入门教程）

//逗比小憨憨/*第一章*HTML引用js方法：*1,外部引用：HTML外部引用js：<scriptsrc="js/day1.js"></script>*2,...

在Node.js中处理Zip文件（node运行js文件）

作者：疯狂的技术宅转发链接：https://mp.weixin.qq.com/s/edJd9-t1AyTGRcha_1k6RA前言Zip文件是常用的压缩文件格式。在本文中，我将演示如何用adm-...

Python 标准库中鲜为人知的宝藏 | Node.js 22.8.0 发布

Python标准库中鲜为人知的宝藏Python标准库功能强大，但有些模块却鲜为人知。本文将介绍一些有趣且实用的模块，助你提升代码效率和功能。数据结构：超越列表和字典除了常用的列表和字典，coll...

小程序，wxml页面里如何写JS代码?WXS如何模块化?

这篇接着上篇小程序，跳转页面的两种方式及其页面传参数继续讲，小程序wxml页面里如何写JS代码？wxs如何模块化？第一个问题：wxml页面要想类似HTML页面中写js代码，必须在页面中使用wxs标...

一周热门
最近发表
标签列表
蜀ICP备2024111239号-28