<body> <select name="" id="ws"> <option value="http://baidu.com">百度</option> <option value="http://hbu.cn">河大</option> <option value="http://jd.com">京东</option> </select> <script> //用的是window.open("http://hbu.cn") var ws =document.getElementById("ws"); ws.onchange=function(){ //弹框alert(this.selectedIndex) window.open(ws.options[this.selectedIndex].value) //select.options[index]返回列表框,下拉菜单第index+1个选项 //selectedIndex返回下拉列表中选项的索引0-1-2 } </script> </body>
结果展示
<table id="ws"> <tr> <td>01</td> <td>02</td> <td>03</td> <td>04</td> <td>05</td> <td>06</td> </tr> <tr> <td>01</td> <td>02</td> <td>03</td> <td>04</td> <td>05</td> <td>06</td> </tr> <tr> <td>01</td> <td>02</td> <td>03</td> <td>04</td> <td>05</td> <td>06</td> </tr> <tr> <td>01</td> <td>02</td> <td>03</td> <td>04</td> <td>05</td> <td>06</td> </tr> </table> 更改第几行行 <input type="text" id="hang"><br> 更改第几列<input type="text" id="lie"><br> 输入内容 <input type="text" id="test"> <input type="button" value="更改" id="btn"> <script> var table = document.getElementById("ws") var hang = document.getElementById("hang") var lie = document.getElementById("lie") // console.log(lie) var text = document.getElementById("text") var btn = document.getElementById("btn") // var ws = table.rows[hang].cells[lie] // ws.style.color = "red"; // ws.innerHTML = text.value btn.onclick = function() { var row = hang.value var cell = lie.value var content = test.value ws.rows[row - 1].cells[cell - 1].innerHTML = content ws.rows[row - 1].cells[cell - 1].style.color = "red" } </script>
第一步:创建或复制节点
第二步:添加节点
①、创建节点
→document.createElement(Tag):创建Tag标签对应的节点。
②、复制节点
→Node cloneNode(boolean deep):复制当前节点。当deep为true时,表示在复制当前节点的同时,复制该节点的全部后代节点;当deep为 false时,表示仅复制当前节点。
③、添加元素(通用方法)
→appendChild(Node newNode):将newNode添加成当前节点的最后一个子节点。
→insertBefore(Node newNode, Node reffNode):在refNode节点之前插入newNode节点。
→replaceChild(Node newChild, Node oldChild):将oldChild节点替换成newChild 节点。
在gs后面再加一个样式蓝,内容为”全场包邮“的内容
<div id="ws"> <a> <h3> gs </h3> </a> </div> <script> //创建html元素 // var div = document.createElement("div"); //复制html var ws = document.getElementById("ws") var div = ws.cloneNode(false); //处理html div.innerHTML = "qcby"; div.style.color = "blue"; div.className = "ws" console.log(div) //添加html元素 document.getElementById("body").appendChild(div) </script>
<input type="text" id="ws"><br> <input type="button" value="添加" id="btn"> <select name="" id="select"> <option value="">苹果</option> </select> <script> var ws = document.getElementById("ws") var btn = document.getElementById("btn") var selecte = document.getElementById("select") btn.onclick = function() { //按钮点击函数 var option = document.createElement("option") var btn1 = ws.value; option.text = btn1 select.add(option, null) ws.value = "" } </script>