how2j.cn

关键字 简介 示例代码
createElement
创建元素节点
示例代码
createTextNode
创建文本节点
示例代码
createAttribute
创建属性节点
示例代码
练习-动态创建一个表
示例代码
答案-动态创建一个表
示例代码
示例 1 : 创建元素节点   
示例 2 : 创建文本节点   
示例 3 : 创建属性节点   
示例 4 : 练习-动态创建一个表   
示例 5 : 答案-动态创建一个表   

示例 1 :

创建元素节点

edit
通过createElement 创建一个新的元素节点
接着把该元素节点,通过appendChild加入到另一个元素节点div1中
运行效果
<html> <div id="d">Hello HTML DOM</div> <script> function add(){ var hr=document.createElement("hr"); var div1 = document.getElementById("d"); div1.appendChild(hr); } </script> <button onclick="add()">在div中追加一个hr元素</button> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<div id="d">Hello HTML DOM</div>
<script>
function add(){
  var hr=document.createElement("hr");
  var div1 = document.getElementById("d");
  div1.appendChild(hr);
}
</script>
 
<button onclick="add()">在div中追加一个hr元素</button>
 
</html>


示例 2 :

创建文本节点

edit
首先创建一个元素节点p (p是p标签,不是随便命名的变量名)
接着通过createTextNode创建一个内容节点text
把text加入到p
再把p加入到div
运行效果
<html> <div id="d">Hello HTML DOM</div> <script> function add(){ var p=document.createElement("p"); var text = document.createTextNode("这是通过DOM创建出来的<p>"); p.appendChild(text); var div1 = document.getElementById("d"); div1.appendChild(p); } </script> <button onclick="add()">在div中追加一个p元素</button> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<div id="d">Hello HTML DOM</div>
<script>
function add(){
 
  var p=document.createElement("p");
  var text = document.createTextNode("这是通过DOM创建出来的<p>");
  p.appendChild(text);
 
  var div1 = document.getElementById("d");
  div1.appendChild(p);
 
}
</script>
  
<button onclick="add()">在div中追加一个p元素</button>
  
</html>


示例 3 :

创建属性节点

edit
首先创建一个元素节点a
接着创建一个内容节点content
把content加入到a
然后通过createAttribute创建一个属性节点 href
设置href的值为http:12306.com
通过setAttributeNode把该属性设置到元素节点a上
最后把a加入到div
运行效果
<html> <div id="d">Hello HTML DOM<br></div> <script> function add(){ var a=document.createElement("a"); var content = document.createTextNode("http://12306.com"); a.appendChild(content); var href = document.createAttribute("href"); href.nodeValue="http://12306.com"; a.setAttributeNode(href); var div1 = document.getElementById("d"); div1.appendChild(a); } </script> <button onclick="add()">在div中追加一个超链</button> </html>


示例 4 :

练习-动态创建一个表

edit  姿势不对,事倍功半! 点击查看做练习的正确姿势
练习-表格斑马线中的表格,使用动态的方式创建出来


示例 5 :

答案-动态创建一个表

edit
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
查看本答案会花费4个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费4个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
账号未激活 账号未激活,功能受限。 请点击激活


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2024-07-27 通过 dom对象 动态创建 Table
虚心求学




使用dom对象动态创建表格。 主要用到方法: 1.appendChild 追加子节点 2.createAttribute 创建属性节点 3.setAttributeNode 设置属性节点





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢


2021-03-29 动态建表答案
镜子里的笑脸




用了一个二维数组,和二重for循环


3 个答案

起个名
答案时间:2024-03-16
111

CharlieLong
答案时间:2023-11-07
动态生成表格答案

重学java
答案时间:2022-01-11
站长提供的答案里面,提供了奇数行是浅灰色的样式,但却没有使用这个样式,在答案里面略作调整就可以支持。 另外, if(i%2 == 1){ var attr = document.createAttribute("class"); attr.nodeValue = "odd"; tr.setAttributeNode(attr); } attr必须是每个for循环都创建一个新的,不能放在循环外共用一个,也是测试出来的结果。浏览器提示,每个属性都需要克隆一份出来赋值,不能同一个attribute对象 赋值给多个 element对象。



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢


2020-12-28 动态创建表格 答案~
2020-11-08 更容易的方法创建文本节点
2020-10-12 第二题,动态建表,是不是不能建立一行一列的表格啊,感觉代码没有任何问题,拜托各位大佬了


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 20 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢