Javascript 如何通过单击按钮添加另一个复选框_Javascript_Html_Checkbox

Javascript 如何通过单击按钮添加另一个复选框

javascript html checkbox

Javascript 如何通过单击按钮添加另一个复选框,javascript,html,checkbox,Javascript,Html,Checkbox,到目前为止，我有以下代码： <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>Project</title> </head> <body> <div class="row"> <div class="col-lg-6"> <div class="input-group">

到目前为止，我有以下代码：

<!DOCTYPE html>
<html>
<head>
 <meta charset = "utf-8">
 <title>Project</title>
</head>
<body>
<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox">
      </span>
      <input type="text" class="form-control">

    </div><!-- /input-group -->
    <button id="btnId">Add</button>
  </div><!-- /.col-lg-6 -->

</div><!-- /.row -->

  <script type="text/javascript">
    var btn = document.getElementById('btnId');
    btn.onclick = function(){
    var txt = document.createElement("textarea"); 
    btn.parentNode.insertBefore(txt, btn);
    return false;
    };
  </script>
</body>
</html>


项目
添加
var btn=document.getElementById（'btnId'）；
btn.onclick=函数（）{
var txt=document.createElement（“textarea”）；
btn.parentNode.insertBefore（txt，btn）；
返回false；
};

它以复选框和文本字段开始，但是当我单击“添加”按钮时，我希望它创建另一个完全相同的复选框和文本字段。我有它，所以现在它只创建一个文本区域。有人知道我如何更改我的javascript代码，以便每次我按下Add按钮时它都会创建一个额外的复选框和文本字段吗

// create container DIV
var div = document.createElement('div');
div.setAttribute('class', 'input-group-addon');

// append it to your button container
btn.parentNode.insertBefore(div, btn); 

// create checkbox
var chk = document.createElement("input"); 
chk.setAttribute('type', 'checkbox');

// append it to the DIV you just created
btn.parentNode.insertBefore(chk, div);        

// create text input
var txt = document.createElement("input"); 
txt.setAttribute('type', 'text');

// append it to the DIV you just created
btn.parentNode.insertBefore(txt, div);

（）

方法

createElement

将标记名作为参数，因此您应该使用

“input”

而不是

“textarea”

但是，如果您想复制整个

输入组及其内容，那么使用.cloneNode（true）
将原始组的副本存储在内存中会更容易，然后再次使用.cloneNode（true）
创建新组
var btn = document.getElementById('btnId');
var group = btn.previousElementSibling.cloneNode(true);
btn.onclick = function() {
    this.parentNode.insertBefore(group.cloneNode(true), this);

    return false;
};

（将true
传递给.cloneNode（）
也会导致克隆其子体，这就是您在此处想要的。）

请注意，.previousElementSibling
在IE8及更低版本中不受支持，但我们需要正确处理文本节点。要支持旧版IE，请创建如下函数：
function previousElementSibling(el) {
    while (el && (el = el.previousSibling) && el.nodeType !== 1) {
    }
    return el
}

var group = previousElementSibling(btn).cloneNode(true);

然后像这样使用它：
function previousElementSibling(el) {
    while (el && (el = el.previousSibling) && el.nodeType !== 1) {
    }
    return el
}

var group = previousElementSibling(btn).cloneNode(true);

div.className='input group addon'
也适用于较旧的浏览器。您好！您应该将项目粘贴到jsfiddle.net并发布链接，这样我们可以更好地帮助您。