要在按钮单击上创建元素的副本

时间：2018-09-17 11:22:03

标签： javascript html css html5 bootstrap-4

我有一份注册表

当用户单击<fieldset>按钮时，我想将+标签之间的内容/元素附加到行的末尾。

实际上，您看到的第一行是重新创建

感谢您的帮助

<script>		
  function myFunction() {

  }
</script>
<!DOCTYPE html>
<html lang="en" >
	<head>
		<meta charset="UTF-8">
		<title>Information Form</title>
	</head>
	<body>

	

	<fieldset>
		<h2 class="fs-title">Registration Form</h2>
    
				<div class="form-item webform-component webform-component-textfield hs_average_gift_size_in_year_2 field hs-form-field" id="webform-component-cultivation--amount-2">
				<div style="width: 17%;float: right;">
					<!-- Begin W_Language Field -->
					<label for="W_Language">LANGUAGE</label>
					<select id="W_Language" class="form-control" name="W_Language">
						<option selected>NONE</option> 
						<option>EN</option> 
						<option>FR</option> 
						<option>GE</option> 
						<option>AR</option> 
					</select>	
					<!-- End W_Language Field -->
				</div>
				<div style="width: 17%;float: right;">
					<!-- Begin exam Field -->
					<label for="W_exam">EXAM</label>
					<select id="W_exam" class="form-control" name="W_exam">
						<option selected>NONE</option> 
						<option>IELTS</option> 
						<option>TOEFL</option> 
						<option>GRE</option> 
						<option>KET</option> 
						<option>FCE</option> 
						<option>MSRT</option> 
						<option>TOLIMO</option> 
						<option>MCHE</option> 
						<option>CPE</option> 
					</select>	
					<!-- End W_exam Field -->
				</div>
				<div style="width: 8%;float: left;">
					<!-- Begin W_Language Field -->
					<button onclick="myFunction();return false" class="btn1" >+</button>
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin W_Language Field -->
					<label for="W_Speack">speck</label>
					<select id="W_Language" class="form-control" name="W_Language">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End W_Language Field -->
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin W_Language Field -->
					<label for="W_Listen">listening</label>
					<select id="W_Language" class="form-control" name="W_Language">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End Language Field -->
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin Language Field -->
					<label for="W_Reading">reading</label>
					<select id="Language" class="form-control" name="Language">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End Language Field -->
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin W_Writing Field -->
					<label for="W_Writing">writing</label>
					<select id="W_Writing" class="form-control" name="W_Writing">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End W_Writing Field -->
				</div>
			</div>
				 

	  </fieldset>
	</body>

</html>

1 个答案:

答案 0 :(得分：4)

您可以为此使用 clone 函数。

  

clone（）方法复制所选元素，包括子节点，文本和属性。

function myFunction() {
				$(".form-item:last-child").after($(".form-item:last-child").clone(true));
			}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
	<head>
		<meta charset="UTF-8">
		<title>Information Form</title>
	</head>
	<body>

	

	<fieldset>
		<h2 class="fs-title">Registration Form</h2>
    
				<div class="form-item webform-component webform-component-textfield hs_average_gift_size_in_year_2 field hs-form-field" id="webform-component-cultivation--amount-2">
				<div style="width: 17%;float: right;">
					<!-- Begin W_Language Field -->
					<label for="W_Language">LANGUAGE</label>
					<select id="W_Language" class="form-control" name="W_Language">
						<option selected>NONE</option> 
						<option>EN</option> 
						<option>FR</option> 
						<option>GE</option> 
						<option>AR</option> 
					</select>	
					<!-- End W_Language Field -->
				</div>
				<div style="width: 17%;float: right;">
					<!-- Begin exam Field -->
					<label for="W_exam">EXAM</label>
					<select id="W_exam" class="form-control" name="W_exam">
						<option selected>NONE</option> 
						<option>IELTS</option> 
						<option>TOEFL</option> 
						<option>GRE</option> 
						<option>KET</option> 
						<option>FCE</option> 
						<option>MSRT</option> 
						<option>TOLIMO</option> 
						<option>MCHE</option> 
						<option>CPE</option> 
					</select>	
					<!-- End W_exam Field -->
				</div>
				<div style="width: 8%;float: left;">
					<!-- Begin W_Language Field -->
					<button class="btn1" onclick="myFunction();return false">+</button>
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin W_Language Field -->
					<label for="W_Speack">speck</label>
					<select id="W_Language" class="form-control" name="W_Language">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End W_Language Field -->
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin W_Language Field -->
					<label for="W_Listen">listening</label>
					<select id="W_Language" class="form-control" name="W_Language">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End Language Field -->
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin Language Field -->
					<label for="W_Reading">reading</label>
					<select id="Language" class="form-control" name="Language">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End Language Field -->
				</div>
				<div style="width: 12%;float: left;">
					<!-- Begin W_Writing Field -->
					<label for="W_Writing">writing</label>
					<select id="W_Writing" class="form-control" name="W_Writing">
						<option selected>4</option> 
						<option>4.5</option> 
						<option>5</option> 
						<option>5.5</option> 
						<option>6</option> 
						<option>6.5</option> 
						<option>7</option> 
						<option>7.5</option> 
						<option>8</option> 
						<option>8.5</option> 
						<option>9</option> 
					</select>	
					<!-- End W_Writing Field -->
				</div>
			</div>
				 

	  </fieldset>
	</body>

</html>

相关问题
最新问题