Question

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

<!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>

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

Answer 1

// 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);

（fiddle）

Answer 2

createElement方法将标记名称作为参数，因此您应该使用"input"而不是"textarea"。

但是如果你想复制整个input-group div及其内容，那么使用.cloneNode(true)将原始副本存储在内存中会更容易，然后使用{{1}再次创建新的。

.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也会导致其后代被克隆，这就是您想要的内容。）

注意IE8及更低版本不支持.cloneNode()，但我们需要正确处理文本节点。要支持旧IE，请执行以下功能：

.previousElementSibling

然后像这样使用它：

function previousElementSibling(el) {
    while (el && (el = el.previousSibling) && el.nodeType !== 1) {
    }
    return el
}

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

2 个答案: