如何在按钮点击时动态添加换行和内容到指定区域？-小浪学习网

如何在按钮点击时动态添加换行和内容到指定区域？

本文将介绍如何在用户点击按钮时，动态地向页面上的指定区域添加新的文本内容，并在每次添加内容时插入一个换行符，实现类似
标签的效果。

实现原理

核心思路是利用 JavaScript 的 dom 操作能力，动态地创建新的元素节点（例如
换行符和文本节点），并将它们添加到目标元素（例如

）中。每次点击按钮，都会创建一个新的换行符和文本节点，从而实现内容逐行添加的效果。

具体步骤

获取必要的 DOM 元素： 首先，需要获取输入框、按钮和目标显示区域的 DOM 元素。这可以通过 document.getElementById() 方法实现。

const nombreInput = document.getElementById("nombre"); const montoInput = document.getElementById("monto"); const totalDiv = document.getElementById("total"); const finalspan = document.getElementById("final"); const aporteSpan = document.getElementById("aporte");

定义点击事件处理函数： 创建一个函数，该函数将在按钮被点击时执行。在这个函数中，我们将完成创建新元素、添加换行符和更新显示内容的操作。

function agregarLinea() {   // 获取输入框的值   const nombre = nombreInput.value;   const monto = montoInput.value;    // 创建换行符元素   const lineBreak = document.createElement("br");    // 创建文本节点   const nuevoTotal = document.createTextNode(` ${nombre} : ${monto} `);    // 将换行符和文本节点添加到目标区域   totalDiv.appendChild(lineBreak);   totalDiv.appendChild(nuevoTotal);    // 更新总计和分摊金额（如果需要）   const montoActual = number(finalSpan.innerHTML) || 0; // 确保初始值为 0   const nuevoMonto = Number(monto) + montoActual;    finalSpan.innerHTML = `${nuevoMonto}`;   aporteSpan.innerHTML = `${nuevoMonto}`;    // 清空输入框（可选）   nombreInput.value = "";   montoInput.value = ""; }

将函数绑定到按钮的点击事件： 将上面定义的函数绑定到按钮的 onclick 事件上。
```
<button onclick="agregarLinea()">Enviar</button>
```

完整代码示例

     动态添加换行和内容    Nombre
  
 Monto
  
 <button onclick="agregarLinea()">Enviar</button> 
 Total:  
  
 A cada uno le toca aportar: 
  <script>   const nombreInput = document.getElementById("nombre");   const montoInput = document.getElementById("monto");   const totalDiv = document.getElementById("total");   const finalSpan = document.getElementById("final");   const aporteSpan = document.getElementById("aporte");    function agregarLinea() {     const nombre = nombreInput.value;     const monto = montoInput.value;      const lineBreak = document.createElement("br");     const nuevoTotal = document.createTextNode(` ${nombre} : ${monto} `);      totalDiv.appendChild(lineBreak);     totalDiv.appendChild(nuevoTotal);      const montoActual = Number(finalSpan.innerHTML) || 0;     const nuevoMonto = Number(monto) + montoActual;      finalSpan.innerHTML = `${nuevoMonto}`;     aporteSpan.innerHTML = `${nuevoMonto}`;      nombreInput.value = "";     montoInput.value = "";   } </script>