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-groupただし、 div全体とそのコンテンツをコピーする場合.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 に答える