时间戳

首页 > 解决方案 > 如何在 Javascript 中单击按钮时添加 div 元素？

javascript - 如何在 Javascript 中单击按钮时添加 div 元素？

问题描述

我有一个 Javascript 和 HTML 代码，如下所示。这个想法是单击加号 (+) 按钮并使用rowAdd()函数中存在的 HTML 生成一个新行。

HTML 代码有 3 个输入框。

    	function rowAdd(event) {
    	  document.getElementById('house-senate-committee').insertAdjacentHTML('aftereend', newRow());  <!-- Line B -->
    	}	       
    	function newRow() {
    		return  `<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
    					<input type="text" name="code[]" style="margin-right:10px;" value="">
    					<input type="text" name="en_desc[]" value="">
    					<input type="text" name="fr_desc[]" style="margin-left:10px;" value="">
    				</div>`;
    	}
    <!-- Add New Row Button START -->
    <div class="plus-minus-button" style="text-align:center;">    
    	<button type="button" onclick="rowAdd()">+</button>   <!-- Line A -->
    </div>
    <!-- Add New Row Button END -->
    
    <div id"house-senate-committee" style="text-align:center; margin-top:15px;"> <!-- Big div START -->
         <!-- Code START -->  
    	      <input type="text" name="code[]" style="margin-right:10px;" value="">
    	<!-- Code END -->
    
         <!-- EN Desc START -->  
    	       <input type="text" name="en_desc[]" value="">
         <!-- EN Desc END -->
    
         <!-- FR Desc START -->  
    	      <input type="text" name="fr_desc[]" style="margin-left:10px;" value="">
         <!-- FR Desc END -->
    </div> <!-- Big DIV END -->

上面的 Javascript 代码显示了内容，但它没有像这样逐行添加 div 元素：

<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
</div>

<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
</div>

<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
</div>

<div class="house-senate-committee" style="text-align:center;margin-top:15px;">
</div>

标签： javascripthtml

解决方案

切换到getElementsByClassName并抓取第一个元素[0]，然后将要插入的位置更改为beforebegin或afterend。

为了使事情正常进行，您必须以rowAdd()某种方式调用，单击时或只是像我那样在代码中的某个位置调用它。

    function rowAdd() {
      document.getElementsByClassName('house-senate-committee')[0].insertAdjacentHTML('beforebegin', newRow());
    }          
    function newRow() {
		return  `<div class="house-senate-committee" style="text-align:center; margin-top:15px;border:1px solid">News div
					<input type="text" name="code[]" style="margin-right:10px;" value="">
					<input type="text" name="en_desc[]" value="">
					<input type="text" name="fr_desc[]" style="margin-left:10px;" value="">
				</div>`;;
    }
<div class="plus-minus-button" style="text-align:center;">    
    <button type="button" onclick="rowAdd()">+</button> 
</div>
<div class="house-senate-committee" style="text-align:center; margin-top:15px;border:1px solid;">old div
</div>

<div class="house-senate-committee" style="text-align:center; margin-top:15px;border:1px solid;">old div
</div>

<div class="house-senate-committee" style="text-align:center; margin-top:15px;border:1px solid;">old div
</div>

<div class="house-senate-committee" style="text-align:center;margin-top:15px; border:1px solid;">old div
</div>

提示：这不是一个好习惯，最好添加和设置一个类style="..."。onclick="rowAdd()"也许读到addEventListener

推荐阅读