1.利用DOM元素创建一个用户留言显示区：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户留言</title>
</head>
<body>
<!--prepend 和 insertBefore 功能类似 在指定位置插入数据-->
<!--append 和 appendChild 功能类似 添加数据到指定对象里面-->
<!--parentElement 获取父元素-->
<!--remove 删除函数-->
<!--event 事件 keycode 键值代码 使用方式为 evenet.code 获取当前用户键盘输入的按键代码-->
<!--key 和 code 还是可以分开使用 分别不用的按键代码格式-->
<label for="comment">请留言:</label>
<input type="text" id="comment" autofocus onkeydown="addComment(this)">
<ul id="list">
</ul>
<script>
function addComment(comment) {
if (event.keyCode ===13){
var list = document.getElementById('list');
var li = document.createElement('li');
li.innerHTML = comment.value;
li.ineerHTML += '<button onclick="del(this)">删除</button>';
if (list.childElementCount ===0){
list.append(li);
}else{
// list.insertBefore(li,list,firstElementChild);
list.prepend(li,list.firstElementChild);
}
}
}
function del(ete) {
ete.parentElement.remove(ete);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2 利用DOM生成一个表格：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作表格的基本操作</title>
<style>
table,th,td{
border:1px solid darkred;
border-collapse:collapse;
}
table{
width:500px;
text-align:center;
/*border-collapse:collapse;*/
}
table caption{
font-size:1.2rem;
margin-bottom:15px;
}
thead{
background-color: #f8f8f8;
}
</style>
</head>
<body>
<table id="cart1">
<caption>购物车1</caption>
<thead>
<tr>
<td>编号</td>
<td>品名</td>
<td>数量</td>
<td>单价</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>手机</td>
<td>1</td>
<td>3000</td>
</tr>
<tr>
<td>2</td>
<td>电脑</td>
<td>1</td>
<td>5000</td>
</tr>
<tr>
<td>3</td>
<td>手机</td>
<td>1</td>
<td>3000</td>
</tr>
</tbody>
</table>
<hr>
<table id="cart2">
<caption>购物车2</caption>
<thead>
<tr>
<th>编号</th>
<th>品名</th>
<th>数量</th>
<th>单价</th>
</tr>
</thead>
<tbody></tbody>
</table>
<hr>
<table id="cart3">
<caption>购物车3</caption>
<thead>
<tr>
<th>编号</th>
<th>品名</th>
<th>数量</th>
<th>单价</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
/*
table对象定义一些属性,可以快速获取指定的子元素
1. tHead: <thea>
2. tBodies: <tbody>...复数
3. tFoot: <tfoot>
4. rows: 所有行
5. cells: 所有列
*/
var cat1 =document.getElementById('cart1');
var data = [
{id:1, name:'梨子',count:10, price:50},
{id:2, name:'牛奶',count:2, price:20},
{id:3, name:'衣服',count:2, price:800}
];
// 获取以id为cart2 的元素
var cart2 =document.getElementById('cart2');
var tbody = cart2.children[2];
data.forEach(function (value) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>'+ value.id +'</td>';
tr.innerHTML += '<td>'+ value.name +'</td>';
tr.innerHTML += '<td>'+ value.count +'</td>';
tr.innerHTML += '<td>'+ value.price +'</td>';
tbody.append(tr)
});
// 用table属性写表单
var cart3 = document.getElementById('cart3');
//获取页面中cart3 标签创建定义
var tbody = cart3.tBodies[0];
for (var i = 0;i < data.length;i++) {
var tr = document.createElement('tr');
Object.keys(data[i]).forEach(function (value) {
tr.innerHTML += '<td>' + data[i][value] + '</td>';
});
tbody.append(tr)
}
</script>
</body>
</html>