JavaScript动态创建Input输入框动态获取值

Web 专栏收录该内容
16 篇文章 0 订阅

   某些情况下需要使用JS动态获取HTML控件并且设置它的CSS样式。

并且可以获取输入的值并显示出来。采用document对象的API方法,

使用document.createElement("input");创建一个输入框,用JS设置CSS

属性input.className;document.getElementById("vote")获取对象,在

对象中进行插入:vote.insertBefore(input,button)插入到按键前面.具体

代码如下:

 

<span style="font-family:Times New Roman;"><!DOCTYPE html>
<html>
<head>
<meta charset=" GBK">
<title>动态创建DIV并设置样式</title>
<style type="text/css">
#parent{
  margin: 0 200px;
  background:blue;
}
#vote{
 background-color:;
 font-family:"楷体";
 font-size:18px;
 margin: 0 300px;
 padding:10px  80px;
 background:green;
}
.input{
  color:black;
  margin:10px 0px;
  display:block;
  text-align:center;
}
.show{
  background-color:#abcdef;
  color:black;
  font-family:"Times New Roman","楷体";
  text-align:center;
  border-style:1px solid blue;
}
</style>
<script type="text/javascript">
var id=1;
function add(){
 var vote=document.getElementById("vote");
 var button=document.getElementById("button");
 var input=document.createElement("input");
    input.type="text";
    input.className="input";
    id++;
	input.id="input_"+id;
    input.placeholder=input.id;
  
  vote.insertBefore(input,button);
}
function show(){
//getElementsByTagName()
   var input=document.getElementsByTagName("input");
   var parent=document.getElementById("parent");
   var div=document.createElement("div");
   div.className="show";
   for(var i=0;i<input.length;i++){
       if("text"==input[i].type){
	     var p=document.createElement("p");
	     p.innerHTML=" Value:"+input[i].value;
	     div.appendChild(p);
	  }
   }
   parent.appendChild(div);
}
</script>
</head>
<body>
<div id="parent">
  <div id="vote">
   <input type="input" class="input" placeholder="默认值" id="input_1" />
   <input type="button" value="添加" id="button" onclick="add()" />
   <input type="button" value="显示" id="show" onclick="show()" />
  </div>
</div>
</body>
</html></span><span style="font-family:KaiTi_GB2312;">
</span>

 

欢迎关注南阁公众号


南阁

 

 

 

 

展开阅读全文
  • 2
    点赞
  • 0
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页

打赏

进修的CODER

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值