JS document.createElement 动态添加表

最新推荐文章于 2021-11-30 21:04:59 发布
原创 最新推荐文章于 2021-11-30 21:04:59 发布 · 1.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#table #border #function #div

本文介绍了一种使用JavaScript动态创建HTML表格的方法。通过简单的代码示例展示了如何逐行逐列地添加单元格，并设置其样式及内容。该方法遵循DHTML的层次结构，适用于网页动态内容更新。

 

JS动态生成DIV比较简单，下面是表的示例

 

<html>

<head>

<title>简单示例</title>

<script>

    function start() {

        // 获取body

        var body = document.getElementsByTagName("body")[0];

 

        // 创建表节点 和tbody节点

        var tbl     = document.createElement("table");

        var tblBody = document.createElement("tbody");

 

 

        for (var j = 0; j < 4; j++) {

            // 添加行tr

            var row = document.createElement("tr");

 

            for (var i = 0; i < 2; i++) {

                // 添加列td

                var cell = document.createElement("td");

                cell.style.border=0;

                cell.style.cellspacing="0";

                cell.style.cellpadding="0";

                var cellText = document.createTextNode("cell is row "+j+", column "+i);

                cell.appendChild(cellText);

                row.appendChild(cell);

            }

 

            // 增加到tbody

            tblBody.appendChild(row);

        }

 

        // 把tbody放入table中

        tbl.appendChild(tblBody);

        // table put to body

        body.appendChild(tbl);

 

set atrribute

        tbl.setAttribute("border", "0");

    }

</script>

</head>

<body onload="start()">

</body>

</html>

 

符合DHTMl的层次结构

 

 

Daqing
关注
Debug-023-Document.createElement()的使用
LM0916的博客
08-23 486
对象的一些常用方法，并且补充了一些说明和示例。事件监听器，当用户选择文件后，执行箭头函数。方法，模拟用户点击文件输入元素，从而唤起文件选择界面。函数进行进一步处理，同时在控制台打印相关信息。用途举例：用这个来实现手动唤起文件上传入口。，然后将其隐藏并添加到。属性中获取第一个文件（元素，并设置其类型为。
javascript的document中的动态添加标签实现方法
11-30
document的高级篇中提供了节点操作的函数，具体包括：获取节点，改变节点，删除节点，替换节点，创建节点，添加节点，克隆节点等函数。我们可以利用这些函数动态改变html的节点。 1、JavaScript [removed] function test1(){//对个节点的ID相同时候的情况 var myhref = document.getElementById('same'); window.alert(myhref.innerText); } function test2() {//输出节点的值 var hobbies = document.
document.createElement("table")
weixin_44895008的博客
08-02 1573
createElement <style> .div{ border: 1px solid black; height: 300px; width: 300px; margin: auto; } </style>
dom操作表格示例(dom创建表格)
xyjikl
12-10 951
一、使用HTML标签创建表格： 复制代码 代码如下: 人员表 姓名 性别 年龄 张三 男 20 李四 女 22 合计：N thead、tfoot、caption标签在一个表格中只能有一个tbody、tr、td、th标签在一个表格中可以有N个 二、使用DOM创建表格 标签是HT
dom创建table的一个方法
毁&灭
08-20 1562
  　　document.createElement("table")只是创建了一个对象，如果要把它添加到document中，还需要另外的方法（appendChild、insertAdjacentElement、insertBefore）         例子：                                                        
(转)使用JavaScript和DOM动态创建表格
weixin_30823227的博客
11-28 458
第一次翻译技术文章，本身英语水平很烂，翻译的也是自己刚开始学习的技术，所以能勉强看懂英文的话都要尽量读 原文 而不要看我的翻译，免得被误导。阅读原文简介　　这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们。你可以学到如何动态地创建、获取、控制和删除HTML元素。这些DOM方法同样适用于XML。所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例，比...
document.createElement()用法及注意事项(ff下不兼容)
10-27
`document.createElement()` 是JavaScript中的一个核心方法，用于动态创建HTML元素。这个方法在处理动态网页和交互式应用时非常有用，因为它允许我们在页面加载后或用户操作时动态地添加、修改或删除DOM元素。然而，...
document.createElement("A")比较不错的属性
10-30
首先，`document.createElement("A")`方法是JavaScript中非常重要的DOM操作API，它允许开发者动态创建一个新的`<a>`元素节点。这个方法通常用于在脚本运行时创建新的HTML元素，而不是直接在HTML文档中写死这些元素。...
document.createElement()用法
09-05
`document.createElement()` 是JavaScript中的一个核心方法，用于在DOM（Document Object Model）中动态创建新的元素节点。这个方法允许开发者在网页加载后根据需要添加新的HTML元素，为页面增加交互性和动态性。它...
IE9+已经不对document.createElement向下兼容的解决方法
09-03
在JavaScript中，`document.createElement` 是一个用于动态创建HTML元素的方法。然而，不同的浏览器对它的实现可能存在差异。在IE9及更高版本中，为了更好地遵循W3C标准，微软对某些方法进行了调整，使得`document....
关于　document.createElement(..)的转贴　
huangxiaochun2006的专栏
03-28 1880
1.请问用dom方法：document.createElement("table");创建一个table，怎么没有指定table的位置等信息。   2.div对象和span对象到底是个什么玩意啊？   3.javascprit中的this.xxx中的this含义是什么呀？   4.dom对象能够跨平台使用吗？问题1：　　document.createElement("table")只是创建
document.createElement()的用法
逍遥乐网-www.hejingzong.cn
03-20 637
document.createElement()的用法 document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。 下面，举...
js使用createElement给table里添加tr、td
oleiwoaboluo的博客
09-21 6471
一、createElement的定义 createElement()方法通过指定名称创建一个元素 例如：document.createElement("tr") 创建一个tr的元素节点 二、语法 document.createElement(nodename) nodename 类型为string类型 为创建元素的名称。 三、例如：给table里新增单元格 1、找到table标签 var tableobj=document.getElementById("table"); 2、创建一个..
js算法--输入行列，生成一个表格（table）
xingguanghui_1134的专栏
08-27 1万+
html: 请输入行数: 请输入列数: 创建 javaScript: functino autocreate() { var line = document.getElementById('rows').value; var list = document.getElementById('cols').value; var
html怎么用js创建表格,创建表格.html
weixin_39578197的博客
06-18 419
function MyTable(rows,cols){this.createTable = function(){this.table = document.createElement('table');this.table.style.border = '2px solid red';for(var i=0;itr = this.table.insertRow();for(var j=0;jv...
JavaScript--动态添加元素
weixin_30607659的博客
01-09 402
在网页中，使用JavaScript动态创建元素的方式有三种： 1.document.write() 2.Element.innerHTML 3.document.createElement() 在上述三种方法中，最常用最常用的是第三种方法，本文依托小例子，对三种方法加以总结。 案例：点击按钮 生成列表，鼠标放上高亮显示的效果 效果图： 页面内容： <input type="button"...
JavaScript动态创建table表格
热门推荐
yangxin_blog的专栏
10-13 3万+
自动创建表格，主要是利用table对象的insertRow(),和insertCell()等技术
js的节点操作动态创建table表格，创建行，删除行
paidaboluo的博客
11-30 1824
节点操作 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 整个文档是一个文档节点，每个 HTML 元素是元素节点，HTML 元素内的文本是文本节点，每个 HTML 属性是属性节点，注释是注释节点 总的来说只要是在窗口内的都是节点，都可以通过DOM操作 insertBefore() 方法可在已有的子节点前插入一个新的子节点。 node.insertBefore(newnode,existingnode) 参数newnode是要插入的节点对象，existingnode是
JavaScript_动态创建表格（及其所有的知识点）_Unit_9;
qq_38053395的博客
08-14 546
Topic ：动态创建表格（及其所有的知识点） 功能说明：  我们模拟从服务器得到数据来动态生成表格的过程  我们把表格放到指定的位置  在这里我们放到box里面 我们可以通过删除键来进行删除相应的数据 我们把生成表格的方法封装成一个函数这样我们以后就可以用一句话方便的创建表格了； 网页示例：   代码示例 ： &lt;!doctype html&gt; &lt;html&...
js document.createElement详细教程
最新发布
08-29
<think>我们正在处理一个关于JavaScript中document.createElement方法的详细教程请求。根据系统指令，我们需要使用正确的LaTeX格式，生成相关问题，并保持回答结构清晰。同时，我们需要参考提供的引用内容，但注意这些引用内容可能并不直接与用户需求相关，因此我们主要依靠自己的知识库来提供准确信息。 用户请求：详细教程关于JavaScript中的document.createElement方法。 回答结构： 1. 方法介绍：解释document.createElement()是什么，它的作用。 2. 语法：展示方法的语法。 3. 参数说明：解释参数。 4. 返回值：说明返回什么。 5. 使用步骤：如何正确使用（通常需要与appendChild或insertBefore等方法配合）。 6. 示例：提供几个示例代码，从简单到复杂。 7. 注意事项：包括常见错误和性能考虑（参考引用中提到的性能问题）。 8. 相关方法：简要介绍appendChild和insertBefore。 根据引用内容，我们注意到： [^1]：提到了使用createElement创建1000个元素的性能测试（耗时）。 [^2]：解释了createElement需要与appendChild或insertBefore联合使用。 [^3]：展示了一个错误用法，即直接赋值createEle = document.createElement，然后调用createEle('a')，这会导致错误，因为丢失了上下文。 [^4]：给出了一个使用insertBefore的例子。 [^5]：是一个GIS教程的广告，与主题无关。 因此，我们在注意事项中需要提到： - 不要直接引用document.createElement而不保留上下文（即不能直接赋值给变量后调用，因为它是document的方法，需要绑定document对象）。 - 性能问题：大量创建元素并添加到文档中会导致重排和重绘，影响性能（如引用1中所示，创建1000个元素并追加，耗时可通过日期差计算）。 生成相关问题： 1. document.createElement和innerHTML创建元素有什么区别？ 2. 如何提高使用document.createElement创建大量元素的性能？ 3. 除了appendChild和insertBefore，还有哪些方法可以将创建的元素添加到文档中？ 现在，我们开始组织回答。</think>### JavaScript `document.createElement()` 方法详细教程 `document.createElement()` 是 JavaScript DOM 操作的核心方法，用于动态创建新的 HTML 元素。创建的元素需配合其他方法（如 `appendChild()`）才能插入文档中[^2]。 #### 一、基础语法 ```javascript const element = document.createElement(tagName); ``` - **`tagName`**：字符串参数，指定要创建的 HTML 标签名（如 `'div'`、`'a'`） - **返回值**：新创建的 DOM 元素节点（尚未加入文档） #### 二、基本使用步骤 1. **创建元素** ```javascript const newDiv = document.createElement('div'); ``` 2. **设置属性/样式** ```javascript newDiv.id = 'myDiv'; newDiv.className = 'box'; newDiv.style.width = '100px'; newDiv.style.height = '100px'; newDiv.style.backgroundColor = 'blue'; ``` 3. **添加内容** ```javascript newDiv.textContent = '动态创建的元素'; // 或 newDiv.innerHTML = '<span>带HTML的内容</span>'; ``` 4. **插入文档** ```javascript // 追加到 body 末尾 document.body.appendChild(newDiv); // 插入特定位置（在 existingElement 前插入） const container = document.getElementById('container'); const existingElement = document.getElementById('child'); container.insertBefore(newDiv, existingElement); // [^4] ``` #### 三、完整示例 ```html <button onclick="createElementDemo()">创建元素</button> <div id="targetContainer"></div> <script> function createElementDemo() { // 1. 创建元素 const newLink = document.createElement('a'); // 2. 设置属性和内容 newLink.href = 'https://example.com'; newLink.textContent = '点击访问示例网站'; newLink.style.display = 'block'; newLink.style.margin = '10px'; // 3. 插入到容器中 const container = document.getElementById('targetContainer'); container.appendChild(newLink); } </script> ``` #### 四、常见错误及解决 1. **未插入文档** 创建的元素必须显式插入文档，否则不会显示[^2]。 2. **上下文丢失**（常见于模块化开发） ```javascript // 错误！createElement 需要 document 上下文 const createEle = document.createElement; createEle('div'); // TypeError [^3] // 正确：保持 document 上下文 const createElement = (tag) => document.createElement(tag); ``` 3. **性能优化** 批量操作时使用文档片段减少重排： ```javascript const fragment = document.createDocumentFragment(); for (let i = 0; i < 1000; i++) { const div = document.createElement('div'); fragment.appendChild(div); } document.body.appendChild(fragment); // 仅触发一次重排[^1] ``` #### 五、与其他创建方式的对比 | 方法 | 特点 | |---------------------|----------------------------------------------------------------------| | `createElement()` | 精准控制元素属性，支持事件绑定，符合 DOM 标准 | | `innerHTML` | 适合批量 HTML 字符串插入，但会破坏现有元素的事件绑定 | | `cloneNode()` | 复制现有元素（参数 `true` 表示深拷贝），适合创建相似结构 | #### 六、适用场景 1. 动态表单添加/删除字段 2. 无限滚动列表项加载 3. 模态框/弹窗组件生成 4. 可视化拖拽元素创建 > **性能注意**：频繁操作 DOM 会导致重排（Reflow）和重绘（Repaint）。在循环中创建元素时，优先使用文档片段（DocumentFragment）[^1]，或使用 `requestAnimationFrame` 分批插入。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值