添加,刪除和修改按鈕（HTML節點元素）ESP8266 APP 界面設計（一）
作用： APP在控制IO端點時，可以依據實際情況增減，界面控制按鈕。
界面如下：
input 用於填寫按鈕名，按鈕訪問網址，修改按鈕名。
button分別對應，add, del,rep三個按鈕。
添加功能：
function addbtn(){
var a=document.getElementById("div1");
var btn=document.createElement("button");
var btname = document.getElementById('btname').value;
btn.appendChild(document.createTextNode(btname));
btn.setAttribute("id", btname);
btn.className = "button";
a.appendChild(btn);
btname.href = "http://192.168.31.166/";
}
刪除功能：
function delbtn(){
var a=document.getElementById("div1");
var btname = document.getElementById('btname').value;
a.removeChild(document.getElementById(btname));
}
修改功能：
function repbtn(){
var a=document.getElementById("div1");
var btn = document.createElement("button");
var btname = document.getElementById('btname').value;
var btnrep = document.getElementById('btnrep').value;
btn.setAttribute("id", btnrep);
btn.appendChild(document.createTextNode(btnrep));
btn.className = "button";
a.replaceChild(btn, document.getElementById(btname));
}
全部代碼附上：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加和刪除按鈕（HTML節點元素）</title>
<style>
.button {
width: 150px;
height: 70px;
text-align: center;
font-weight: 700;
color: #FFF;
border-radius: 1px;
margin: 15px 15px 15px 0;
position: relative;
overflow: hidden;
outline: none;
border: 0px solid #FFF;
background: darkcyan;
font-size: 30px;
outline:none;
}
.inputstyle{
width: 70px;
height: 20px;
text-align: center;
}
.divstyle{
width: 340px;
margin:0 auto;
}
</style>
</head>
<body>
<input class="inputstyle" id="btname" type="text" value="按鈕名稱"></input>
<input class="inputstyle" id="btnurl" type="text" value="網址"></input>
<input class="inputstyle" id="btnrep" type="text" value="修改"></input>
<button onclick="addbtn()">添加</button>
<button onclick="delbtn()">刪除</button>
<button onclick="repbtn()">修改</button><br />
<div class="divstyle" id="div1"></div>
<script>
function addbtn(){
var a=document.getElementById("div1");
var btn=document.createElement("button");
var btname = document.getElementById('btname').value;
btn.appendChild(document.createTextNode(btname));
btn.setAttribute("id", btname);
btn.className = "button";
a.appendChild(btn);
btname.href = "http://192.168.31.166/";
}
function delbtn(){
var a=document.getElementById("div1");
var btname = document.getElementById('btname').value;
a.removeChild(document.getElementById(btname));
}
function repbtn(){
var a=document.getElementById("div1");
var btn = document.createElement("button");
var btname = document.getElementById('btname').value;
var btnrep = document.getElementById('btnrep').value;
btn.setAttribute("id", btnrep);
btn.appendChild(document.createTextNode(btnrep));
btn.className = "button";
a.replaceChild(btn, document.getElementById(btname));
}
</script>
</body>
</html>