<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 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>
<divid="d">Hello HTML DOM</div>
<script>
function add(){
var p=document.createElement("p");
var text = document.createTextNode("这是通过DOM创建出来的<p>");
<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>
更容易的方法创建文本节点:
var para = document.createElement("P"); // Create a <p> element
para.innerText = "This is a paragraph"; // Insert text
document.body.appendChild(para); // Append <p> to <body>
<div id="box"></div>
<script>
var table=document.createElement("table");
var box=document.getElementsById("box");
var tr=document.createElement("tr");
table.appendChild(tr);
var td=document.createElement("td");
td.appendChild(document.createTextNode("1"));
table.appendChild(td);
box.appendChild(table);
</script>