Javascript CLONE元素，由用户输入数据

时间：2018-10-18 17:51:53

标签： javascript jquery html css

当我点击 ADD 按钮时，它在下面显示文本，但在同一列显示。这是2输入字段。

  
      

  1. 我用过：<input id="accordion_input" type="text"/>

    2.   

  2. 另一个是：<div id="accordion_body" class="panel-body"></div>

    3.   

enter image description here

  

所以我想要，如果我填写输入和 div 区域并单击ADD按钮，则应该出现，第二次如果我单击Add按钮，它应该是CLONE First输入数据。数据必须在每个克隆部分的不同列中显示，而不是在同一列中！就像下面的快照一样：

enter image description here 

			$(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 个答案:

答案 0 :(得分：-1)

将内容包装在<p>标记中，或在每个标记之后插入<br/>。

相关问题
最新问题