如何添加其他複選框以按鈕的點擊

到目前爲止，我有以下代碼：如何添加其他複選框以按鈕的點擊

<!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代碼，以便每次按下添加按鈕時它會創建一個額外的複選框和文本字段？

來源

2013-10-26 Godin1

您好！您應該將您的項目粘貼到jsfiddle.net併發布鏈接，以便我們能夠更好地幫助您。 –

的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()導致其後代要和克隆，這是你想要的這裏。）

注.previousElementSibling不是在IE8和更低的支持，但我們需要正確處理文本節點。爲了支持舊的IE瀏覽器，讓這樣的函數：

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

然後使用它是這樣的：

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

來源

2013-10-26 15:45:17

// 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）

來源

2013-10-26 15:44:10

'div.className ='input-group-addon''也適用於舊版瀏覽器。 – duri

如何添加其他複選框以按鈕的點擊

回答

相關問題