動態生成元素以及動態增加刪除屬性的方法
阿新 • • 發佈：2018-12-12
經過專案的訓練特此一記動態建立元素的方法
動態生成元素方法一：
<script type="text/javascript" > var i=1; function cDiv(){ var oDiv=document.createElement("div"); oDiv.style.border="1px solid black"; oDiv.style.width="300px"; oDiv.style.height="300px"; oDiv.id='div'+i; document.body.appendChild(oDiv); var addinput=document.createElement("input"); addinput.type='button'; addinput.id='add'+i; addinput.onclick=cDiv; addinput.value='create'+i; document.body.appendChild(addinput); var rminput=document.createElement("input"); rminput.type='button'; rminput.id=''+i; rminput.onclick=removeE; rminput.value='remove'+i; document.body.appendChild(rminput); i++; } function removeE(){ var id=this.id; document.body.removeChild(document.getElementById('div'+id)); document.body.removeChild(document.getElementById('add'+id)); document.body.removeChild(document.getElementById(''+id)); } </script> <body> <div></div> <input type="button" id="btn" onclick="cDiv()" value='create'/> <input type="button" id="rmbtn" onclick="removeE()" value='remove'/> </body>
動態生成元素方法二：
function InnerSave() { document.getElementById('InnerDiv_Persional').innerHTML += "<div class='OuterDiv'><table class='InnerTable'><tbody>" + "<tr><td><span>姓</span><span>名：</span></td>" + "<td><input type='text' value='" + PersionalName + "' readonly='true' style='border: none'></td></tr>" + "<tr><td><span>性別：</span></td>" + "<td><input type='text' value='" + Sex + "'readonly='true'style='border: none'></td></tr>" + "<tr><td><span>身份：</span></td>" + "<td><input type='text' value='" + Position + "'readonly='true'style='border: none'></td></tr>" + "<tr><td><span>出生日期：</span>" + "</td><td><input type='text' value='" + Birthday + "'readonly='true'style='border: none'></td></tr>" + "<tr><td><span>地址：</span></td>" + "<td><input type='text' value='" + PersionalAddress + "'readonly='true'style='border: none'></td></tr>" + "<tr><td><span>個人簡介：</span></td><td></td></tr></tbody></table>" + "<textarea class='PersionalIntroduceTextArea'readonly='true'style='border: none;resize: none'>" + PersionalIntroduce + "</textarea>" + "<button onclick='ReWrite(this)' class='btn-info'style='width: 100px;height: 30px;border-radius: 8px;margin-left: 25px;margin-top: 12px;display: inline-block'>修改成員資訊</button>" + "<button onclick='RemovePersion(this)'class='btn-danger'style='width: 100px;height: 30px;border-radius: 8px;margin-left: 25px;margin-top: 12px;display: inline-block'>刪除此成員</button>" + "<button onclick='SaveReWrite(this)' class='btn-warning'style='width: 100px;height: 30px;border-radius: 8px;margin-left: 25px;display: none;margin-top: 0;margin-bottom: 0'>儲存資訊</button></div>"; }
JQ動態增加屬性：
$("#ID").attr("disabled","disable5d");
$("#ID").attr("屬性"，“屬性值”);
$("#ID").addClass("");JQ動態刪除屬性：
$("#ID").removeAttr("屬性”);