Javascript CLONE element by user input data
Question
When i clicked on ADD Button, it's appearing the text in the bellow but it's appearing the same column. here is 2 input field.
i have used :
<input id="accordion_input" type="text"/>another one is :
<div id="accordion_body" class="panel-body"></div>
So i want, if i fill-up the input and div area & clicked ADD button then i should be appear and second time if i clicked on add button then it's should be CLONE the First input data. The data must be showing on different column every clone part, not in the same column! Like the below snapshot:
$(document).ready(function() { $('#Add_btn').click(function() { $('#accordion_body').append($('#editableDiv').html()); var x = $("#accordion_input").val(); $("#accordion_title").append(x); }); });
<html> <head> <title>404</title> </head> <body> <input id="accordion_input" type="text"> <div id="editableDiv" contenteditable=""></div><br/> <div id="acc_main" contenteditable="false" class="accordion-main"> <div class="panel-group trash_removed" id="accordion" role="tablist" aria-multiselectable="true" contenteditable="false"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne" contenteditable="false"> <h4 class="panel-title"> <a id="accordion_title" style="display: block"></a> </h4> <div id="expandingCol" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" style="display: block"> <div id="accordion_body" class="panel-body"></div> </div> </br> </div> </div> </div> </div> <button id="Add_btn">Add</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </body> </html>
1 answers
solution1
-1 2018-10-18 18:13:31
将内容包装在<p>标记中，或在每个标记后插入<br/> 。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.