Js基础3:节点创建（js创建dom节点）
zhezhongyun 2025-05-08 08:09 10 浏览
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}列`;
}
}
}相关推荐
- 「layui」表单验证:验证注册
-
注册界面手动验证获取短信验证码代码原文<!DOCTYPEhtml><htmllang="zh"><head>&...
- Full text: Joint statement between China and Kenya on creating an inspiring example in the all-weather China-Africa community with a shared future for the new era
-
JointStatementBetweenthePeople'sRepublicofChinaandtheRepublicofKenyaonCreatinganInspi...
- 国际组织最新岗位信息送给你
-
国际刑警组织PostingTitleITLogisticsManagerGrade5DutyStationAbidjan,IvoryCoastDeadlineforApplicatio...
- 【新功能】Spire.PDF 8.12.5 支持设置表单域的可见与隐藏属性
-
Spire.PDF8.12.5已发布。该版本新增支持设置表单域的可见与隐藏属性、添加自定义的元数据以及给PDF文档的元数据添加新的命名空间。本次更新还增强了PDF到DOCX和图片的转换...
- AI curbs show Biden's rejection of cooperation
-
AIcurbsshowBiden'srejectionofcooperation:ChinaDailyeditorial-Opinion-Chinadaily.com.cnT...
- “煤气灯效应”上热搜，这几种有毒的“情感关系”也要注意了……
-
近日，“煤气灯效应”（theGaslightEffect）再次进入公众视野并登上热搜，引发网友广泛关注。那么，什么是“煤气灯效应”？以“爱”之名进行情绪控制在心理学中，通过“扭曲受害者眼中的真实”...
- Qt编写推流程序/支持webrtc265/从此不用再转码/打开新世界的大门
-
一、前言在推流领域，尤其是监控行业，现在主流设备基本上都是265格式的视频流，想要在网页上直接显示监控流，之前的方案是，要么转成hls，要么魔改支持265格式的flv，要么265转成264，如果要追求...
- 写给运维的Nginx秘籍
-
要说Web服务器、代理服务器和调度服务器层面，目前使用最大的要数Nginx。对于一个运维工程师日常不可避免要和Nginx打交道。为了更好地使用和管理Nginx，本文就给大家介绍几个虫虫日常常用的秘籍。...
- 突破亚马逊壁垒，Web Unlocker API 助您轻松获取数据
-
在数据驱动决策的时代，电商平台的海量数据是十足金贵的。然而，像亚马逊这样的巨头为保护自身数据资产，构建了近乎完美的反爬虫防线，比如IP封锁、CAPTCHA验证、浏览器指纹识别，常规爬虫工具在这些防线面...
- 每日一库之 logrus 日志使用教程
-
golang日志库golang标准库的日志框架非常简单,仅仅提供了print,panic和fatal三个函数对于更精细的日志级别、日志文件分割以及日志分发等方面并没有提供支持.所以催生了很多第三方...
- 对比测评:为什么AI编程工具需要 Rules 能力?
-
通义灵码ProjectRules在开始体验通义灵码ProjectRules之前，我们先来简单了解一下什么是通义灵码ProjectRules？大家都知道，在使用AI代码助手的时候，有时...
- python 面向对象编程
-
Python的面向对象编程（OOP）将数据和操作封装在对象中，以下是深度解析和现代最佳实践：一、核心概念重构1.类与实例的底层机制classRobot:__slots__=['...
- Windows系统下常用的Dos命令介绍(一)
-
DOS是英文DiskOperatingSystem的缩写，意思是“磁盘操作系统”。DOS主要是一种面向磁盘的系统软件，说得简单些，DOS就是人给机器下达命令的集合，是存储在操作系统中的命令集。主要...
- 使用 Flask-Admin 快速开发博客后台管理系统:关键要点解析
-
一、为什么选择Flask-Admin？Flask-Admin是Flask生态中高效的后台管理框架，核心优势在于：-零代码生成CRUD界面：基于数据库模型自动生成增删改查功能-高度可定制...
- Redis淘汰策略导致数据丢失?
-
想象一下，你的Redis服务器是一个合租宿舍，内存就是床位。当新数据（新室友）要住进来，但床位已满时，你作为宿管（淘汰策略）必须决定：让谁卷铺盖走人？Redis提供了8种"劝退"方案，...
- 一周热门
- 最近发表
-
- 「layui」表单验证:验证注册
- Full text: Joint statement between China and Kenya on creating an inspiring example in the all-weather China-Africa community with a shared future for the new era
- 国际组织最新岗位信息送给你
- 【新功能】Spire.PDF 8.12.5 支持设置表单域的可见与隐藏属性
- AI curbs show Biden's rejection of cooperation
- “煤气灯效应”上热搜，这几种有毒的“情感关系”也要注意了……
- Qt编写推流程序/支持webrtc265/从此不用再转码/打开新世界的大门
- 写给运维的Nginx秘籍
- 突破亚马逊壁垒，Web Unlocker API 助您轻松获取数据
- 每日一库之 logrus 日志使用教程
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- HTML 参考手册 (28)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)