JS示例25-创建元素并添加
一、知识要点
1、document.createElement('li') 2、oUl.appendChild(oLi);
二、源码参考
<!DOCTYPE >
<html>
<head>
<title></title>
<meta charset="utf-8">
<script>
window.onload = function() {
var oAddBtn = document.getElementById('add');
var oName = document.getElementById('name');
var oUl = document.getElementById('ul1');
var id = 0;
oAddBtn.onclick = function() {
var oLi = document.createElement('li');
id++;
oLi.innerHTML = '<span>' + id + '</span>、<span>' + oName.value + '</span>'
oUl.appendChild(oLi);
}
}
</script>
</head>
<body>
<input type="text" name="" id="name" value="Tom" />
<input type="button" name="" id="add" value="新增" />
<ul id='ul1'>
<!--<li><span>1</span>、<span>姓名</span>-->
</li>
</ul>
</body>
</html>
image
表格新增
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>新增</title>
<script>
window.onload = function () {
var oTab = document.getElementById('tab1');
var oBtn = document.getElementById('btn1');
var oName = document.getElementById('name'); // 姓名
var oAge = document.getElementById('age'); // 年龄
oBtn.onclick = function () {
var oTr = document.createElement('tr');
var oTd = document.createElement('td'); // 序号td
oTd.innerHTML = oTab.tBodies[0].rows.length + 1; // 序号+1
oTr.appendChild(oTd);
var oTd = document.createElement('td'); // 姓名td
oTd.innerHTML = oName.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td'); // 年龄td
oTd.innerHTML = oAge.value
oTr.appendChild(oTd);
oTab.tBodies[0].appendChild(oTr);
};
};
</script>
</head>
<body>
姓名：<input id="name" type="text" value="Tom" />
年龄：<input id="age" type="text" value="28" />
<input id="btn1" type="button" value="添加" />
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
</tr>
</tbody>
</table>
</body>
</html>
image
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录