百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

Js基础3:节点创建（js创建dom节点）

zhezhongyun 2025-05-08 08:09 42 浏览

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

相关推荐

用豆包生成的BMI计算器（豆包的热量是多少?）

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8&#...

Android 开发中文引导-应用小部件

应用小部件是可以嵌入其它应用（例如主屏幕）并收到定期更新的微型应用视图。这些视图在用户界面中被叫做小部件，并可以用应用小部件提供者发布。可以容纳其他应用部件的应用组件叫做应用部件的宿主（1）。下面的截...

Qt推流(视频文件/视频流/摄像头/桌面转流媒体rtmp+hls+webrtc)

一、前言说明推流直播就是把采集阶段封包好的内容传输到服务器的过程。其实就是将现场的视频信号从手机端，电脑端，摄影机端打包传到服务器的过程。“推流”对网络要求比较高，如果网络不稳定，直播效果就会很差，观...

一看就会!谷歌广告转化跟踪详细设置指南来了

在出海推广业务中，投放广告最常见的目的是获取订单，但我们怎么知道有没有达成投放目的呢？谷歌转化跟踪技术就可以做到！熟悉谷歌的卖家朋友都知道，转化跟踪在最近几年变得越来越复杂了，虽然有很多选项可以自定义...

Android原生编解码接口MediaCodec详解

作者：躬行之MediaCodec是Android中的编解码器组件，用来访问底层提供的编解码器，通常与MediaExtractor、MediaSync、MediaMuxer、MediaCrypt...

手把手搭建RTSP流媒体服务器（rtsp 流媒体）

0.引言本文主要讲解如何搭建RTSP流媒体服务器的过程，使用开源项目ZLMediaKit。通过这个开源项目，推RTSP流到服务器，然后拉流端可以拉取RTSP、RTMP等流。ZLMediaKit码云链接...

MediaInfo 24.04.0 是一个关于多媒体文件的信息提供工具

MediaInfo24.04.0是一个关于多媒体文件的信息提供工具（仅当文件中包含信息时才提供）：包括常规信息（标题、作者、导演、专辑、曲目编号、日期、时长等）；视频信息（编解码器、画面比例、帧率...

rmvb格式视频怎么打开，rmvb转MP4认准这个方法

　一、rmvb是什么格式？　　RMVB是一种视频文件格式，其中的VB指的是可变比特率。比起上一代的RM格式，RMVB　　格式的画面比较清晰，因为它是降低了静态画面下的比特率。　　二、制作rmvb　　①...

教你用Plex Media Server，把铁威马变成你的“私人好莱坞”!

TNAS（铁威马NAS）中可以安装多媒体服务器、影视、PlexMediaServer、EmbyServer作为个人媒体服务器使用。PlexMediaServer可以组织整理TNAS上的媒体...

你肯定用过!经典Windows软件被抛弃

Windows系统这些年持续更新的过程中，不断融入新的软件和功能的同时，一些经典的应用也渐渐成为了历史……Windows媒体播放器被抛弃Windows系统不断地推陈出新，一些老旧的组件也难免被抛弃，在...

博思得Q8标签打印全能手（博思得标签打印机安装教程）

2014-12-0905:35:00作者：宋达希【中关村在线办公打印频道原创】服装吊牌、洗涤标签、产品说明标签等都要用到标签打印机，这些标签涵盖多种尺寸的长度和宽度以及材质。另外作为一件商品或者产...

flv文件用什么播放器打开，这样做不踩雷!

FLV是FLASHVIDEO的简称，是随着FlashMX的推出发展而来的视频格式。它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等问题。一、...

media player怎么转换格式?音频转换神器推荐!

Windowsmediaplayer怎么转换格式？WindowsMediaPlayer是微软公司出品的一款多媒体播放器，通常简称“WMP”。提供了编辑音频和视频文件的功能。用户可以使用该软件导...

视频参数检查工具更新:MediaInfo 23.10

MediaInfo提供有关视频或音频文件的技术和标签信息。信息示例包括编解码器、比特率、每秒帧数、宽度、高度、频道数、持续时间、标题、作者、字幕语言和章节名称。多种方式可以查看信息（文本、工作表、树和...

多媒体管理软件:JRiver Media Center 31.0.68 (64位)

JRiverMediaCenter64位是适用于大量库的完整媒体解决方案。它组织、播放和标记所有类型的媒体文件，并对Xbox、PS3、UPnP、DLNA和TiVo进行翻录、刻录。JRiverM...

一周热门
最近发表
标签列表