添加新的輸入，並使用此不修改HTML

Question

我只有：

<div> 
    <textarea id="names"></textarea> 
</div> 

我不能修改HTML。我只能使用jQuery。能夠製造類似：

<input type="checkbox" id="yes"> 
<div style="display:none"> 
    <textarea id="names"></textarea> 
</div> 

$("#yes").click(function(){ 
    $("#names").parent().show(); 
}) 

默認如果頁面加載並準備應該是唯一的：

<input type="checkbox" id="yes"> 

如果我檢查這個，然後告訴我有textarea的股利。

是否可以不修改HTML？如果是，如何？

FIDDLE：http://jsfiddle.net/2ZMQz/

Answer 1

var checkbox = $('<input type="checkbox">'); 
var parent = $('#names').parent().hide().before(checkbox); 

checkbox.click(function() { 
    parent.toggle(); 
}); 

http://jsfiddle.net/2ZMQz/14/

Answer 2

請嘗試以下

$("#names").parent().hide().before('<input type="checkbox" id="yes" />'); 

可以使用的切換，而不是顯示

改善複選框功能

$("#yes").click(function(){ 
    $("#names").parent().toggle(); 
}) 

顧名思義它會切換可見性，所以如果您取消選擇複選框，它將隱藏內容。

http://jsfiddle.net/2ZMQz/7/

Answer 3

是的，你可以做到這一點。

$("#names").parent().hide().before('<input type="checkbox" id="yes">'); 

$("#yes").click(function() { 
    if ($(this).is(':checked')) { 
     $("#names").parent().show(); 
    } else { 
     $("#names").parent().hide();  
    }}); 

http://jsfiddle.net/2ZMQz/15/