innerHTML插入时textarea内容被清空问题求助

开发了一个页面，用户可通过下拉菜单选择选项，点击后在指定行插入新功能模块。下拉菜单代码如下：

<ul class="dropdown-menu px-2 py-3 ms-sm-n4 ms-n5" aria-labelledby="dropdownTable">
    <li><a class="dropdown-item border-radius-md" id="tx1" href="javascript: void(0)" onclick="displayInputtx1()">tx1</a></li>
    <li><a class="dropdown-item border-radius-md" id="lj1" href="javascript: void(0)" onclick="displayInputPrelj1()">lj1</a></li>
    <li><a class="dropdown-item border-radius-md" id="jo1" href="javascript: void(0)" onclick="displayInputjo1()">jo1</a></li>
    <li><a class="dropdown-item border-radius-md" id="pr1" href="javascript: void(0)" onclick="displayInputpr1()">pr1</a></li>
    <li><a class="dropdown-item border-radius-md" id="cf1" href="javascript: void(0)" onclick="displayInputcf1()">cf1</a></li>
</ul>

以点击tx1为例，执行的脚本如下：

function tx1() {
    var submitbutton = document.getElementById('submitbutton')
    var intro = document.getElementById('tx1') 
    var introNewSection = document.getElementById('tx1-row')
    var uniqueID = ""
    var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var length = 7
    for (var i = length; i > 0; --i) uniqueID += chars[Math.floor(Math.random() * chars.length)];
    uniqueID = uniqueID
    introNewSection.innerHTML +=  '<div class="col-lg-5 mb-lg-0 mb-4" id=' + uniqueID + '> <div class="card z-index-2"> <div class="card-body p-3" style="margin-top: -20px;"> <h6 class="ms-2 mt-4 mb-0">Intro <a href="#" onclick="javascript:deleteInput(' + uniqueID + ')" style="text-align: right; float: right; margin-right: 12px;"><i class="fa fa-times" style="color: gray;"></i></a></h6> <p class="text-sm ms-2">Section 1</p> <div class="container border-radius-lg"> <div class="row"> <textarea type="text" class="form-control" name="intro" placeholder="Enter your current Intro" id="intro" style="height: 100px;" required></textarea> </div> </div> </div> </div> </div>'
    submitbutton.style.display = ''
 }

模块会插入到这个div中：

<div class="row mt-4" id="tx1-row">
</div>

当前问题：每次点击插入新tx1模块时，原有模块里textarea已输入的内容会被清空，同时新增空白模块。

1. innerHTML += 导致DOM重渲染：使用innerHTML +=拼接内容时，浏览器会先将容器内现有DOM结构拆解为字符串，拼接新内容后重新解析渲染整个容器。这个过程中，用户输入到textarea的动态内容不会被保留——因为innerHTML只记录元素的初始HTML结构，不包含用户输入的实时值，重渲染后textarea会回到空白初始状态。
2. 重复ID违反HTML规则：每个新模块的textarea都使用id="intro"，违反了HTML中id必须唯一的规定，后续可能引发DOM操作冲突。

改用DOM API创建新元素并追加到容器，避免破坏原有DOM结构；同时保证每个元素ID唯一。

修改后的tx1函数如下：

function tx1() {
    var submitbutton = document.getElementById('submitbutton')
    var introNewSection = document.getElementById('tx1-row')
    var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var length = 7
    let uniqueID = '';
    for (let i = length; i > 0; --i) {
        uniqueID += chars[Math.floor(Math.random() * chars.length)];
    }

    // 创建外层容器div
    const colDiv = document.createElement('div');
    colDiv.className = 'col-lg-5 mb-lg-0 mb-4';
    colDiv.id = uniqueID;

    // 构建模块内容，替换为唯一ID
    colDiv.innerHTML = `
        <div class="card z-index-2"> 
            <div class="card-body p-3" style="margin-top: -20px;"> 
                <h6 class="ms-2 mt-4 mb-0">Intro 
                    <a href="#" onclick="deleteInput('${uniqueID}')" style="text-align: right; float: right; margin-right: 12px;">
                        <i class="fa fa-times" style="color: gray;"></i>
                    </a>
                </h6> 
                <p class="text-sm ms-2">Section 1</p> 
                <div class="container border-radius-lg"> 
                    <div class="row"> 
                        <textarea type="text" class="form-control" name="intro" placeholder="Enter your current Intro" id="intro-${uniqueID}" style="height: 100px;" required></textarea> 
                    </div> 
                </div> 
            </div> 
        </div>
    `;

    // 追加新模块到目标容器
    introNewSection.appendChild(colDiv);
    submitbutton.style.display = '';
}

修改说明 #

• 使用appendChild追加新元素，不会触动原有DOM结构，用户输入的内容会完整保留。
• 将textarea的ID改为intro-${uniqueID}，确保每个元素ID唯一，避免冲突。
• 修正deleteInput的参数传递，用字符串包裹ID，避免触发变量解析错误。

内容的提问来源于stack exchange，提问作者devdude19289