900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > js动态向页面添加元素

js动态向页面添加元素

时间:2019-02-18 12:59:42

相关推荐

js动态向页面添加元素

目标代码:<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()添加子元素,否则会报元素为空错误。另外,解决问题时,不应该被某一种思维方式固定,要学会打破模式化,以实现目的为前提(更高级一点的方法就是不去想做什么,最后做成什么算什么,当然这是后话了,现在作为菜鸟要先以实现目的为前提,少想多做,多码)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。