0

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

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

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

4

2 回答 2

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

（小提琴）

于 2013-10-26T15:44:10.647 回答
0

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

但是如果你想复制整个input-groupdiv 及其内容，那么将.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()它的后代也会被克隆，这就是你想要的。）

注意.previousElementSiblingIE8 及更低版本不支持，但我们需要正确处理文本节点。要支持较旧的 IE，请编写如下函数：

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

然后像这样使用它：

var group = previousElementSibling(btn).cloneNode(true);
于 2013-10-26T15:45:17.820 回答