正如摘要所述，我们将通过修改 DOM 元素，动态创建和添加换行符和文本节点来实现这个效果，并对数值累加进行处理。
核心思路
获取输入框的值： 通过 document.getElementById() 获取输入框元素，并使用 .value 属性获取用户输入的内容。创建换行元素： 使用 document.createElement(“br”) 创建一个
元素，用于换行。创建文本节点： 使用 document.createTextNode() 创建一个包含输入内容的文本节点。将换行和文本节点添加到目标元素： 使用 appendChild() 方法将换行元素和文本节点添加到指定的 DOM 元素中。累加数值： 使用 Number() 函数将字符串转换为数值，并进行累加。
代码示例
以下是一个完整的代码示例，演示了如何在按钮点击时动态添加换行和内容：
动态添加换行和内容 Nombre:
Monto:
立即学习“Java免费学习笔记（深入）”；
Total: 0
A cada uno le toca aportar: 0
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}`; };
代码解释
Nombre:
: 创建 “Nombre” 标签和文本输入框，并添加换行符。
Monto:
立即学习“Java免费学习笔记（深入）”；
: 创建 “Monto” 标签和数字输入框，并添加换行符。
: 创建 “Enviar” 按钮，并绑定 ir() 函数到点击事件。
Total: 0
A cada uno le toca aportar: 0
: 创建用于显示总数和分摊金额的段落，并设置初始值为 0。…: 包含 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 操作性能和安全性等问题，以确保代码的正确性和效率。
以上就是使用 JavaScript 在按钮点击时动态添加换行和内容的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1573208.html
微信扫一扫 
支付宝扫一扫 
