目标代码:
<div id="userInfo" class="row cl border-tg">
<label class="form-label col-xs-3"><span class="c-red">*</span>登录用户名:</label>
<div id="divLogin" class="formControls col-xs-9">
<input type="text" id="txtLOGINNAME" name="LOGINNAME" class="input-text" datatype="*" nullmsg="必须填写【登录用户名】!" value="<%=appuser.getLOGINNAME()%>" οnkeyup="loginCheck();" />
</div>
<div id="divMSG" style="color: #ff070e;display: none" >
<h6 style="margin: 24px 0 0 0;">/*该登录名已存在!*/</h6>
</div>
</div>
JS动态添加元素代码:
function createSome() {
var d=document.getElementById("userInfo");
var la=document.createElement("label");
var s=document.createElement("span");
var dtext=document.createElement("div");
var itext=document.createElement("input");
var dmsg=document.createElement("div");
var hmsg=document.createElement("h6");
la.setAttribute("class","form-label col-xs-3");
s.setAttribute("class","c-red");
s.append("*");
la.appendChild(s);
la.append("登录用户名");
dtext.setAttribute("id","divLogin");
dtext.setAttribute("class","formControls col-xs-9");
itext.setAttribute("type","text");
itext.setAttribute("id","txtLOGINNAME");
itext.setAttribute("name","LOGINNAME");
itext.setAttribute("class","input-text");
itext.setAttribute("datatype","*");
itext.setAttribute("nullmsg","必须填写【登录用户名】!");
itext.setAttribute("value","<%=appuser.getQYID()%>"+"${data.PERSONNELNO}");
itext.setAttribute("onkeyup","loginCheck();");
dmsg.setAttribute("id","divMSG");
dmsg.setAttribute("style","color: #ff070e;display: none");
hmsg.setAttribute("style","margin: 24px 0 0 0;");
hmsg.append("/*该登录名已存在!*/");
dtext.appendChild(itext);
dmsg.appendChild(hmsg);
d.appendChild(la);
d.appendChild(dtext);
d.appendChild(dmsg);
}
//判断用户名是否已经存在
function loginCheck() {
ajaxPost("${ctx}/tuser/loginCheck", { loginname: $("#txtLOGINNAME").val() }, function (d) {
if (d!=0) {
document.getElementById("txtLOGINNAME").style='background-color: #fbe2e2';
document.getElementById("divLogin").className='formControls col-xs-6';
document.getElementById("divMSG").style.display='inline';
}else {
document.getElementById("txtLOGINNAME").style='';
document.getElementById("divMSG").style.display='none';
document.getElementById("divLogin").className='formControls col-xs-9';
}
});
}
添加元素时,要先设置子元素相关内容,然后再appendChild()添加子元素,否则会报元素为空错误。另外,解决问题时,不应该被某一种思维方式固定,要学会打破模式化,以实现目的为前提(更高级一点的方法就是不去想做什么,最后做成什么算什么,当然这是后话了,现在作为菜鸟要先以实现目的为前提,少想多做,多码)