使用 JavaScript 在按钮点击时动态添加换行和内容-html教程-PHP中文网

使用 JavaScript 在按钮点击时动态添加换行和内容

DDD

发布： 2025-08-21 21:08:25

原创

455人浏览过

使用 javascript 在按钮点击时动态添加换行和内容

正如摘要所述，我们将通过修改 DOM 元素，动态创建和添加换行符和文本节点来实现这个效果，并对数值累加进行处理。

核心思路

获取输入框的值： 通过 document.getElementById() 获取输入框元素，并使用 .value 属性获取用户输入的内容。
创建换行元素： 使用 document.createElement("br") 创建一个 <br> 元素，用于换行。
创建文本节点： 使用 document.createTextNode() 创建一个包含输入内容的文本节点。
将换行和文本节点添加到目标元素： 使用 appendChild() 方法将换行元素和文本节点添加到指定的 DOM 元素中。
累加数值： 使用 Number() 函数将字符串转换为数值，并进行累加。

代码示例

以下是一个完整的代码示例，演示了如何在按钮点击时动态添加换行和内容：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

<!DOCTYPE html>
<html>
<head>
  <title>动态添加换行和内容</title>
</head>
<body>

  <p>Nombre:</p>
  <input type="text" id="nombre">
  <br>
  <p>Monto:</p>
  <input type="number" id="monto">
  <br>
  <button onclick="ir()">Enviar</button>
  <br>
  <p>Total: <span id="final">0</span> </p>
  <div id="total">
  </div>
  <p>A cada uno le toca aportar: <span id="aporte">0</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");
      const 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>

登录后复制

代码解释

<!DOCTYPE html><html><head><title>动态添加换行和内容</title></head><body>...</body></html>: 定义 HTML 文档结构。
<p>Nombre:</p><input type="text" id="nombre"><br>: 创建 "Nombre" 标签和文本输入框，并添加换行符。
<p>Monto:</p><input type="number" id="monto"><br>: 创建 "Monto" 标签和数字输入框，并添加换行符。
<button onclick="ir()">Enviar</button><br>: 创建 "Enviar" 按钮，并绑定 ir() 函数到点击事件。
<p>Total: <span id="final">0</span> </p><div id="total"></div><p>A cada uno le toca aportar: <span id="aporte">0</span></p>: 创建用于显示总数和分摊金额的段落，并设置初始值为 0。
<script>...</script>: 包含 JavaScript 代码块。
function ir() { ... }: 定义 ir() 函数，该函数在按钮点击时执行。
const nombre = document.getElementById("nombre").value;: 获取 "nombre" 输入框的值。
let monto = document.getElementById("monto").value;: 获取 "monto" 输入框的值。
const total = document.getElementById("total");: 获取 id 为 "total" 的 div 元素。
const final = document.getElementById("final");: 获取 id 为 "final" 的 span 元素。
const aporte = document.getElementById("aporte");: 获取 id 为 "aporte" 的 span 元素。
const lineBreak = document.createElement("br");: 创建一个新的换行元素。
const newTotal = document.createTextNode(\ ${nombre} : ${monto} `);`: 创建包含 "nombre" 和 "monto" 值的文本节点。
total.appendChild(lineBreak);: 将换行元素添加到 "total" div 元素中。
total.appendChild(newTotal);: 将文本节点添加到 "total" div 元素中。
monto = Number(monto) + Number(final.innerHTML);: 将 "monto" 和 "final" 的值转换为数字并相加。
final.innerHTML = \${monto}`;`: 更新 "final" span 元素的值。
aporte.innerHTML = \${monto}`;`: 更新 "aporte" span 元素的值。

注意事项

类型转换： 从输入框获取的值是字符串类型，如果需要进行数值计算，需要使用 Number() 函数将其转换为数值类型。
DOM 操作性能： 频繁的 DOM 操作可能会影响性能，尤其是在处理大量数据时。可以考虑使用文档片段（DocumentFragment）来减少 DOM 操作次数。
安全性： 如果输入的内容来自用户，需要注意进行安全过滤，防止 XSS 攻击。