Example01
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js_dom_demo</title> <script type="text/javascript"> function show() { document.getElementById("info").innerHTML = "<h1>Hello World</h1>"; } </script> </head> <body> <form action="" method="post"> <input type="button" value="显示" οnclick="show()"> <span id="info"></span> </form> </body> </html>
Example02
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js_dom_demo2</title> <script type="text/javascript"> function setArea() { var id = [1, 2, 3]; var value = ["北京", "上海", "广州"]; var select = document.getElementById("area"); select.length = 1; // 表示每次可以选择的内容是1个 select.options[0].selected = true; // 设置第一个为默认选中 for (var i = 0; i < id.length; i++) { // 创建option的节点 var option = document.createElement("option"); option.setAttribute("value", id[i]); // 在option子节点之中增加文本节点 option.appendChild(document.createTextNode(value[i])); // 增加子节点 select.appendChild(option); } } </script> </head> <body οnlοad="setArea()"> <form action="" method="post"> <select name="area" id="area"> <option value="0">--没有地区--</option> </select> </form> </body> </html>
Example03
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js_dom_demo3</title> <script type="text/javascript"> var count = 3; function addrow() { var table = document.getElementById("mytab"); var tr = table.insertRow(-1); // 增加一个新的行 var td1 = tr.insertCell(-1); // 增加列 var td2 = tr.insertCell(-1); // 增加列 var td3 = tr.insertCell(-1); // 增加列 var btn = document.createElement("input"); btn.setAttribute("type", "button"); btn.setAttribute("value", "-"); btn.onclick = function() { deleterow(this); } td1.appendChild(document.createTextNode("Hello " + count)); td2.appendChild(document.createTextNode("World " + count)); td3.appendChild(btn); count++; } function deleterow(btn) { var tr = btn.parentNode.parentNode; var table = document.getElementById("mytab"); table.deleteRow(tr.rowIndex); count--; } </script> </head> <body> <input type="button" value="+" οnclick="addrow()"> <table id="mytab" border="1"> <tr> <td>Hello 1</td> <td>World 1</td> <td><input type="button" value="-" οnclick="deleterow(this)"></td> </tr> <tr> <td>Hello 2</td> <td>World 2</td> <td><input type="button" value="-" οnclick="deleterow(this)"></td> </tr> </table> </body> </html>
Example04
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js_dom_demo4</title> <script type="text/javascript"> function addrow() { var tab = document.getElementById("mytab"); var id = document.getElementById("id").value; var name = document.getElementById("name").value; var tbody = document.createElement("tbody"); var tr = document.createElement("tr"); var td_id = document.createElement("td"); var td_name = document.createElement("td"); td_id.appendChild(document.createTextNode(id)); td_name.appendChild(document.createTextNode(name)); tr.appendChild(td_id); tr.appendChild(td_name); tbody.appendChild(tr); tab.appendChild(tbody); } </script> </head> <body> 新的编号:<input type="text" id="id" name="id"> 新的姓名:<input type="text" id="name" name="name"> <input type="button" value="增加" οnclick="addrow()"> <table id="mytab" border="1"> <tr> <td>编号</td> <td>姓名</td> </tr> </table> </body> </html>