文章导读

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

作者 2025年8月21日 27

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

核心思路

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

代码示例

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

<!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">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>

代码解释

动态添加换行和内容…: 定义 HTML 文档结构。
Nombre:

: 创建 “Nombre” 标签和文本输入框，并添加换行符。
Monto:

立即学习“Java免费学习笔记（深入）”；

: 创建 “Monto” 标签和数字输入框，并添加换行符。
: 创建 “Enviar” 按钮，并绑定 ir() 函数到点击事件。
Total: 0

A cada uno le toca aportar: 0

: 创建用于显示总数和分摊金额的段落，并设置初始值为 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 攻击。

总结

本文介绍了如何使用 JavaScript 在按钮点击时动态添加换行和内容。通过创建和添加 DOM 元素，可以实现灵活的页面内容更新。同时，需要注意类型转换、DOM 操作性能和安全性等问题，以确保代码的正确性和效率。

评论（已关闭）

评论已关闭

Hello! 欢迎来到悠悠畅享网！