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

Question

我有一个 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>

Answer 1

切换到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