5.网页中增加新的内容

使用target.innerHTML="new content";动态改变网页内容。

例如，动态添加成员信息。

下面是表格动态添加成员的例子

html

<table id="personinfo"><thead><tr><th>Name</th><th>Email</th><th>Salary</th><th></th></tr></thead><tbody><tr><td>hello</td><td>hello</td><td>hello</td><td><input type="button" value="删除" name="remove"></td></tr><tr><td>world</td><td>world</td><td>world</td><td><input type="button" value="删除" name="remove"></td></tr></tbody></table><div class="newper"><div>添加新的员工</div><div id="name"><span>name: </span><input type="text" name="in-name"></div><div id="email"><span>email: </span><input type="text" name="in-email"></div><div id="salary"><span>salary:</span><input type="text" name="in-salary"></div><input type="button" value="添加" id="btnadd"></div>

css

table{border: 1px solid black;margin: 50px auto;border-collapse: collapse;}table th,table td{border: 1px solid black;text-align: center;padding: 2px 3px;}.newper{margin: 0 auto;border: 1px solid black;width: 240px;padding: 10px;text-align: center;}

JavaScript

function myClickByID( id , fun ){var btn=document.getElementById(id);btn.onclick=fun;}window.onload=function () {myClickByID("btnadd",function () {var name=document.getElementsByName("in-name")[0];var email=document.getElementsByName("in-email")[0];var salary=document.getElementsByName("in-salary")[0];var tr=document.createElement("tr");//可以在标签中间使用变量tr.innerHTML="<td>"+name.value+"</td>\n"+"<td>"+email.value+"</td>\n"+"<td>"+salary.value+"</td>\n"+"<td><input type=\"button\" value=\"删除\" name=\"remove\"></td> ";var person=document.getElementById("personinfo");// console.log();person.children[1].appendChild(tr);remove=document.getElementsByName("remove");for (var i=0;i<remove.length;++i){remove[i].onclick=function () {if (confirm("确定删除吗？")==true)this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);}}});var remove=document.getElementsByName("remove");for (var i=0;i<remove.length;++i){remove[i].onclick=function () {// console.log(this.parentNode.parentNode);if (confirm("确定删除吗？")==true)this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);}}}

结果

效果

代码

效果

代码

在没有改变tbody的其他的内容前提下，实现网页内容的动态添加，效率较高。