本文讲解如何使用原生 JavaScript 将页面中动态添加的多个 元素的内容，实时合并生成带样式的 标签字符串，并统一输出到一个 的 value 中，解决多文本域仅输出 undefined 的常见问题。
本文讲解如何使用原生 javascript 将页面中动态添加的多个 `
动态注入样式
（如宽高），需基于对应
以下是优化后的完整实现：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet"><div class="btnP">
<button id="addTxt" class="btn btn-primary" title="Add text block">
<i class="bi bi-textarea-t fs-4"></i>
</button>
</div>
<input style="height:50px;width:100%" id="textbox" readonly><div class="webB" id="webB"></div>
<script>
(function () {
const textbox = document.getElementById('textbox');
const txtBtn = document.getElementById('addTxt');
const webB = document.getElementById('webB');
txtBtn.addEventListener("click", createTxt);
function createTxt() {
const txtTyper = document.createElement('textarea');
txtTyper.placeholder = 'Type text here'; // 推荐用 placeholder 替代 innerText（更语义化）
txtTyper.className = 'txtTyper form-control mt-2'; // 添加 Bootstrap 样式便于对齐
txtTyper.rows = 3;
webB.appendChild(txtTyper);
}
function addValue() {
const paragraphs = [...document.querySelectorAll(".txtTyper")]
.map(el => {
// 安全获取值：空内容时返回空字符串，避免 null/undefined 导致拼接异常
const content = el.value.trim() || '';
return `<p style="margin:0;padding:0.5rem 0;height:${el.offsetHeight}px;width:${el.offsetWidth}px;">${content}</script>`;
})
.join('');
textbox.value = paragraphs;
requestAnimationFrame(addValue); // 下一帧继续监听更新
}
// 启动实时同步
addValue();
})();
? 关键注意事项：
- ✅ 永远避免重复 ID：HTML 规范要求 id 全局唯一；多次 getElementById() 或 querySelectorAll('#id') 可能返回意外结果。应统一使用 class="txtTyper" 并配合 querySelectorAll('.txtTyper')。
- ✅ requestAnimationFrame 是更优选择：相比 setInterval(1)，它由浏览器调度，在页面不可见时自动暂停，节省 CPU，且天然与渲染周期对齐，保证内容更新不卡顿。
- ⚠️ 样式宽度/高度说明：offsetWidth/Height 获取的是包括 padding/border 的布局尺寸。若需精确控制
渲染效果，建议后续通过 CSS 类统一管理样式，而非内联 style（提升可维护性）。
- ? 增强健壮性：.trim() 和空值判断防止空白段落污染输出；readonly 属性让 #textbox 仅作展示用途，避免用户误编辑。
最终效果：每点击一次「Add text block」，新增一个可编辑文本域；所有文本域内容实时以
形式聚合进底部输入框，格式清晰、性能稳定，完全兼容 Bootstrap 且无需 jQuery。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
