单击按钮时如何创建元素的副本

我一直在尝试学习构建网站，并且我遇到了一个我似乎无法找到答案的问题。我希望#buttonNewNote在单击时创建#cloneBox的副本，但似乎无法弄清楚。谢谢！单击按钮时如何创建元素的副本

代码

 <html> 
<body> 
    <div id='navbar'> 
    <div id='siteTitle'> 
     <h1> Notes.com </h1> 
     <button id= 'buttonNewNote'> New Note </button> 
    </div> 
    </div> 
    <div class='cloneBox'> 
    <textarea rows="4" cols="50">Enter your notes Here! </textarea> 
    </div> 

</body> 
</html>

CSS

.cloneBox { 
     top: 200px; 
     left:50px; 
     display: -webkit-flex; 
     border: 5px; 
     border-top: 20px; 
     border-style: solid; 
     border-color: yellow; 
     width:260px; 
    } 

    #noteInput { 
     position: relative; 
     min-width: 50px; 
     width: 200px; 
     height: 100px; 
     border: 5px; 
     border-top: 20px; 
     border-color: #3296d2; 
    }

我Jquery的

什么

$(document).ready(function() { 
    $('.cloneBox').draggable(); 
    $('#buttonNewNote').click(function(){ 
    $(document.createElement('div')); 
     $('div').html('<textarea rows="4" cols="50">Enter your notes Here! 
</textarea>') 
     $('div').addClass('cloneBox') 


    }); 
});

太谢谢你了！

来源

2017-08-11 tanner marston

您需要使用'的clone（）' –

试试这个使用的clone（）

$('#buttonNewNote').click(function(){ 
    var clone_box = $('body').find('.cloneBox:first'); 
    clone_box.clone().appendTo("body"); 
    });

来源

2017-08-11 07:46:40

您可以使用clone

$(document).ready(function() { 
 

 
    $('#buttonNewNote').click(function() { 
 
    $(".cloneBox").clone().appendTo("#cloneArea") 
 
    }); 
 
});

.cloneBox { 
 
    top: 200px; 
 
    left: 50px; 
 
    display: -webkit-flex; 
 
    border: 5px; 
 
    border-top: 20px; 
 
    border-style: solid; 
 
    border-color: yellow; 
 
    width: 260px; 
 
} 
 

 
#noteInput { 
 
    position: relative; 
 
    min-width: 50px; 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 5px; 
 
    border-top: 20px; 
 
    border-color: #3296d2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='navbar'> 
 
    <div id='siteTitle'> 
 
    <h1> Notes.com </h1> 
 
    <button id='buttonNewNote'> New Note </button> 
 
    </div> 
 
</div> 
 
<div class='cloneBox'> 
 
    <textarea rows="4" cols="50">Enter your notes Here! </textarea> 
 
</div> 
 
<div id="cloneArea"></div>

来源

2017-08-11 07:46:48 brk

您需要使用clone()得到textarea的克隆并将其附加到你的DOM。并确保textarea不克隆这些值，因此您需要重置它。下面是更新后的代码：

$('#buttonNewNote').click(function() { 
 
    var cloneObj = $(".cloneBox:first").clone(); 
 
    $(cloneObj).find('textarea').val('Enter your notes Here!'); 
 
    $('body').append(cloneObj); 
 
});

.cloneBox { 
 
    top: 200px; 
 
    left: 50px; 
 
    display: -webkit-flex; 
 
    border: 5px; 
 
    border-top: 20px; 
 
    border-style: solid; 
 
    border-color: yellow; 
 
    width: 260px; 
 
} 
 

 
#noteInput { 
 
    position: relative; 
 
    min-width: 50px; 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 5px; 
 
    border-top: 20px; 
 
    border-color: #3296d2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<body> 
 
    <div id='navbar'> 
 
    <div id='siteTitle'> 
 
     <h1> Notes.com </h1> 
 
     <button id='buttonNewNote'> New Note </button> 
 
    </div> 
 
    </div> 
 
    <div class='cloneBox'> 
 
    <textarea rows="4" cols="50">Enter your notes Here! </textarea> 
 
    </div> 
 

 
</body> 
 

 
</html>

来源

2017-08-11 07:46:50

你可以这样做：

$(document).ready(function() { 
    $('#buttonNewNote').click(function(){ 
    var div = $('.cloneBox').clone(); 
    var textArea = div.find('#textarea1').RemoveAttr('id'); 
    textArea.attr('id','textarea2'); 
    $('.cloneBox').append(textArea; 
    }); 
});

和你的HTML将是：

<html> 
<body> 
    <div id='navbar'> 
    <div id='siteTitle'> 
     <h1> Notes.com </h1> 
     <button id= 'buttonNewNote'> New Note </button> 
    </div> 
    </div> 
    <div class='cloneBox'> 
    <textarea rows="4" cols="50" id="textarea1">Enter your notes Here! </textarea> 
    </div> 

</body> 
</html>

来源

2017-08-11 07:49:44

如果你想添加只有textarea的其他你不得不追加整个DIV身体。 –

尽可能少的改变你的代码给你看看该怎么办：

$('#buttonNewNote').click(function() { 
    var note = document.createElement('div'); 
    $(note).html('<textarea rows="4" cols="50">Enter your notes Here! </textarea>'); 
    $(note).addClass('cloneBox'); 
    $(note).draggable(); 
    $('body').append(note); 
});

但你或许应该只是利用jQuery的clone功能（请注意，你必须记得可拖动）：

$('#buttonNewNote').click(function() { 
    $('body').append($($('.cloneBox')[0]).clone()); 
    $('.cloneBox').draggable(); 
});

来源

2017-08-11 07:50:27 Poootaatoooo

你是在正确的轨道上。尽管如此，对于克隆元素，我更喜欢使用.clone（）方法，然后将该克隆附加到原始元素的父元素，以便它紧跟在HTML之后。我还在点击函数的底部添加了一行，以将克隆重置为可拖动状态。

不要忘了添加两个脚本标签，以便您同时使用jQuery和jQuery-UI。

$(document).ready(function() { 
 
    var copy = $('.cloneBox').clone(); 
 
    $('.cloneBox').draggable(); 
 
    $('#buttonNewNote').click(function(){ 
 
    $('.cloneBox:first').parent().append(copy.clone()); 
 
    $('.cloneBox').draggable(); 
 
    }); 
 
});

.cloneBox { 
 
     top: 200px; 
 
     left:50px; 
 
     display: -webkit-flex; 
 
     border: 5px; 
 
     border-top: 20px; 
 
     border-style: solid; 
 
     border-color: yellow; 
 
     width:260px; 
 
    } 
 

 
    #noteInput { 
 
     position: relative; 
 
     min-width: 50px; 
 
     width: 200px; 
 
     height: 100px; 
 
     border: 5px; 
 
     border-top: 20px; 
 
     border-color: #3296d2; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div id='navbar'> 
 
    <div id='siteTitle'> 
 
    <h1> Notes.com </h1> 
 
    <button id= 'buttonNewNote'> New Note </button> 
 
    </div> 
 
</div> 
 
<div class='cloneBox'> 
 
    <textarea rows="4" cols="50">Enter your notes Here! </textarea> 
 
</div>

来源

2017-08-11 07:59:36 oMiKeY

单击按钮时如何创建元素的副本

回答

相关问题