如何使用JavaScript在按钮点击时添加换行符-小浪学习网

如何使用JavaScript在按钮点击时添加换行符

本文将介绍如何使用JavaScript在用户点击按钮时，动态地向页面添加换行符和文本内容。通过修改dom结构，可以实现每次点击按钮都在指定元素下方添加新的内容，并更新总计数值。本文将提供详细的代码示例和解释，帮助开发者理解并应用这一技术。

动态添加换行符和文本内容

要实现点击按钮时添加换行符和文本，我们需要使用JavaScript来操作DOM（文档对象模型）。以下是一个示例，展示了如何实现这一功能：

<!DOCTYPE html> <html> <head>   <title>动态添加换行符</title> </head> <body>  <p>Nombre</p> <input type="text" id="nombre"> <br> <p>Monto</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p> <input type="number" id="monto"> <br> <button onclick="ir()">Enviar</button> <br> <p>Total: <span id="final"></span> </p> <div id="total"> </div> <p>A cada uno le toca aportar: <span id="aporte"></span></p>  <script> function ir() {   const nombre = document.getElementById("nombre").value;   let monto = document.getElementById("monto").value;   const total = document.getElementById("total");   const final = document.getElementById("final");   const aporte = document.getElementById("aporte");    const lineBreak = document.createElement("br");   let newTotal = document.createTextNode(` ${nombre} : ${monto} `);   total.appendChild(lineBreak);   total.appendChild(newTotal);    monto = Number(monto) + Number(final.innerHTML);    final.innerHTML = `${monto}`;   aporte.innerHTML = `${monto}`; }; </script>  </body> </html>

代码解释：

获取元素： 首先，通过document.getElementById()获取需要操作的html元素，包括输入框（nombre、monto）、显示总计的span元素（final）和用于添加内容的div元素（total）。
创建元素： 使用document.createElement(“br”)创建一个换行符元素。
创建文本节点： 使用document.createTextNode()创建一个包含文本内容的文本节点，内容包括输入的姓名和金额。
添加元素： 使用appendChild()方法将换行符和文本节点添加到total元素中，从而实现换行和添加文本的效果。
更新总计： 将新输入的金额加到总金额上，并更新final和aporte元素。注意使用 Number() 函数将输入值转换为数字，以避免字符串连接的问题。