如何克隆div包装按钮点击

http://jsfiddle.net/TDmRv/1/

我想做的：我希望id为"theDiv"的div被包裹在输入到页面上的文本周围。我想要这个，这样文本将出现在创建的多个div中。

更多解释：好吧，所以我要做的是键入一些输入，并将其显示在div中——这很好，但我希望在单击输入时div将其包裹起来。因此，每次我单击"添加"时，文本都会被包装到div中并显示出来。但我也试图让它多次出现，所以每次我添加输入时，div都会被包裹在文本周围。最后，我试着把这两个按钮放在那里，我想当用jQuery点击"添加"时，必须插入它们。我只需要一些指导，因为我正在努力理解这将如何运作。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#edit").click(function(){
    $("#theDiv").css("background-color","red");
  });
});
$(document).ready(function(){
  $("#delete").click(function(){
    $("#theDiv").remove();
  });
});
$(document).ready(function(){
  $("#add").click(function(){
    $('#edit').wrap('<div class="theDiv" />');
  });
});
</script>
<style>
#theDiv {   
    border: 1px solid rgb(204, 204, 204); 
    margin: 5px 0pt; 
    padding: 5px;
    background-color: blue;
    height:50px;
    }
button {
    float:right;
}
</style>
</head>
<body>
<div id="hold">
<button id="edit">Edit</button><button id="delete">Delete</button>
</div>
<form>
    <div><textarea class="textI" id="textI2" style="width: 400px; height: 50px;"></textarea></div>
    <div><input type="button" id="add"value="add" onclick="theDiv_append()" /></div>
</form>
<script language="javascript">
$('.textI').each(function() {
    var default_value = this.value;
    $(this).focus(function() {
        if(this.value == default_value) {
            this.value = '';
        }
    });
});
function theDiv_append() {
    $('#theDiv').append($('#textI2').val());
}
</script>
</body>
</html>

试试这个，更改#add-click到这个，它在jsfiddle中工作，只是添加文本，我没有这么做，但你会看到如何添加新的蓝色div

            $("#add").click(function(){
             var newRow = $('#theDiv').clone();
             $('#hold').append(newRow);
             $('#edit').wrap('<div class="theDiv" />');
               });
           });

相关内容

最新更新

热门标签：