如何在input 标签下动态创建一个Div？
做一个表单一验证。当输入用户名字符长度少于6时,新建一个div,显示错误信息.但是我创建的div只会在最底下显示不能在input标签下面显示。我把代码简化了。请问我要怎样...
做一个表单一验证。当输入用户名字符长度少于6时,新建一个div,显示错误信息.
但是我创建的div只会在最底下显示
不能在input标签下面显示。
我把代码简化了。
请问我要怎样才能在input后面创建一个div
<html>
<head>
<title>表单验证</title>
<script type="text/javascript">
function setDiv(){
var info=document.createElement('div');
info.innerHTML="Error";
//document.body时，可以在最后创建一个Div
//document.uname时，无法创建
document.body.appendChild(info);
//document.uname.appendChild(info);
}
</script>
</head>
<body >
用户名:<input type="text" name="uname" id="uname" onclick="setDiv()"><br/>
密 码:<input type=”pwd" name="upwd" id="upwd"><br/>
<input type="submit" value="注册"><input type="reset" value="取消">
</body>
</html> 展开
但是我创建的div只会在最底下显示
不能在input标签下面显示。
我把代码简化了。
请问我要怎样才能在input后面创建一个div
<html>
<head>
<title>表单验证</title>
<script type="text/javascript">
function setDiv(){
var info=document.createElement('div');
info.innerHTML="Error";
//document.body时，可以在最后创建一个Div
//document.uname时，无法创建
document.body.appendChild(info);
//document.uname.appendChild(info);
}
</script>
</head>
<body >
用户名:<input type="text" name="uname" id="uname" onclick="setDiv()"><br/>
密 码:<input type=”pwd" name="upwd" id="upwd"><br/>
<input type="submit" value="注册"><input type="reset" value="取消">
</body>
</html> 展开
1个回答
展开全部
试着改了一下，
和你的要求可能不太一样，但是效果应该是对的，是用隐藏做的。
创建的话你的代码就应该是在body里的最后一个元素下创建的。是不太容易控制。个人感觉还是隐藏比较好。
另外事件换成了onchange 感觉这样比较好。
<html>
<head>
<title>表单验证</title>
<script type="text/javascript">
function setDiv(sender){
//var info=document.createElement('div');
//info.innerHTML="Error";
//document.body时，可以在最后创建一个Div
//document.uname时，无法创建
//document.body.appendChild(info);
//document.uname.appendChild(info);
var uname_err_div = document.getElementById('uname_err');
if (sender.value.length < 6){
uname_err_div.style.display = 'block';
} else {
uname_err_div.style.display = 'none';
}
}
</script>
</head>
<body >
<div style="clear:both;">
<div style="float:left;">用户名:<input type="text" name="uname" id="uname" onchange="setDiv(this);" /></div>
<div id="uname_err" style="display:none;">Error</div>
</div>
<div style="clear:both;">
<div style="float:left;">密 码:<input type=”pwd" name="upwd" id="upwd" /></div>
<div id="upwd_err" style="display:none;">Error</div>
</div>
<div style="clear:both;">
<input type="submit" value="注册" /><input type="reset" value="取消" />
</div>
</body>
</html>
和你的要求可能不太一样，但是效果应该是对的，是用隐藏做的。
创建的话你的代码就应该是在body里的最后一个元素下创建的。是不太容易控制。个人感觉还是隐藏比较好。
另外事件换成了onchange 感觉这样比较好。
<html>
<head>
<title>表单验证</title>
<script type="text/javascript">
function setDiv(sender){
//var info=document.createElement('div');
//info.innerHTML="Error";
//document.body时，可以在最后创建一个Div
//document.uname时，无法创建
//document.body.appendChild(info);
//document.uname.appendChild(info);
var uname_err_div = document.getElementById('uname_err');
if (sender.value.length < 6){
uname_err_div.style.display = 'block';
} else {
uname_err_div.style.display = 'none';
}
}
</script>
</head>
<body >
<div style="clear:both;">
<div style="float:left;">用户名:<input type="text" name="uname" id="uname" onchange="setDiv(this);" /></div>
<div id="uname_err" style="display:none;">Error</div>
</div>
<div style="clear:both;">
<div style="float:left;">密 码:<input type=”pwd" name="upwd" id="upwd" /></div>
<div id="upwd_err" style="display:none;">Error</div>
</div>
<div style="clear:both;">
<input type="submit" value="注册" /><input type="reset" value="取消" />
</div>
</body>
</html>
追问
噢。这种方法我也用过类似的，但是我是想知道怎么在body标签外创建一个DIV
document.body.appendChild(info);
//document.uname.appendChild(info);
就是说，可以在任意一个ID后新建一个DIV
追答
我做过增加行，感觉是这样的。
body也不过是个大的容器，要在一个ID后建div应该把这个ID元素放在一个div容器的末尾，
再给这个容器增加子元素。
你试试看。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
