|
|
|
示例 2 : 创建文本节点 示例 3 : 创建属性节点 示例 4 : 练习-动态创建一个表 示例 5 : 答案-动态创建一个表
通过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>
<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>
首先创建一个元素节点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>
<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>
首先创建一个元素节点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>
把练习-表格斑马线中的表格，使用动态的方式创建出来
<style>
table{
border-collapse:collapse;
width:90%;
}
tr.odd{
background-color:#f8f8f8;
}
tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}
td{
width:25%;
text-align:center;
}
</style>
<div id ="d">
</div>
<script>
function createTD(text){
var td=document.createElement("td");
var text= document.createTextNode(text);
td.appendChild(text);
return td;
}
function createTR(texts){
var tr=document.createElement("tr");
for(var i=0;i<texts.length;i++){
var td = createTD(texts[i]);
tr.appendChild(td);
}
return tr;
}
function createTable(rows){
var table=document.createElement("table");
for(var i=0;i<rows.length;i++){
var tr= createTR(rows[i]);
table.appendChild(tr);
}
return table;
}
var row0= new Array("id","名称","血量","伤害");
var row1= new Array("1","gareen","340","58");
var row2= new Array("2","teemo","320","76");
var row3= new Array("3","annie","380","38");
var row4= new Array("4","deadbrother","400","90");
var rows=new Array(row0,row1,row2,row3,row4);
var div = document.getElementById("d");
var table=createTable(rows);
div.appendChild(table);
</script>
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
<style>
table{
border-collapse:collapse;
width:90%;
}
tr.odd{
background-color:#f8f8f8;
}
tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}
td{
width:25%;
text-align:center;
}
</style>
<div id ="d">
</div>
<script>
function createTD(text){
var td=document.createElement("td");
var text= document.createTextNode(text);
td.appendChild(text);
return td;
}
function createTR(texts){
var tr=document.createElement("tr");
for(var i=0;i<texts.length;i++){
var td = createTD(texts[i]);
tr.appendChild(td);
}
return tr;
}
function createTable(rows){
var table=document.createElement("table");
for(var i=0;i<rows.length;i++){
var tr= createTR(rows[i]);
table.appendChild(tr);
}
return table;
}
var row0= new Array("id","名称","血量","伤害");
var row1= new Array("1","gareen","340","58");
var row2= new Array("2","teemo","320","76");
var row3= new Array("3","annie","380","38");
var row4= new Array("4","deadbrother","400","90");
var rows=new Array(row0,row1,row2,row3,row4);
var div = document.getElementById("d");
var table=createTable(rows);
div.appendChild(table);
</script>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2024-07-27
通过 dom对象 动态创建 Table
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2021-03-29
动态建表答案
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 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
