正如摘要所述，我们将通过修改 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" 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 操作性能和安全性等问题，以确保代码的正确性和效率。
本站资料仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！
THE END
暂无评论内容