如何实现同一提交表单的多次输入词汇依次展示不覆盖原有内容

问题原因 #

当前代码每次提交时直接对display元素的innerHTML执行赋值操作，新内容会直接替换原有内容，因此会出现旧内容被覆盖的问题。

解决方案 #

基础实现（文字直接并排展示） #

将赋值逻辑改为内容追加即可，同时可以补充常用的交互优化：

function showTag(e){
    // 阻止表单默认提交导致的页面刷新
    e?.preventDefault();
    const inputContent = document.getElementById('user_input').value.trim();
    // 过滤空输入
    if (!inputContent) return;
    // 追加内容，两次输入之间加空格分隔，可按需替换为其他分隔符
    document.getElementById('display').innerHTML += ` ${inputContent}`;
    // 提交后清空输入框
    document.getElementById('user_input').value = '';
}

对应调整HTML结构，将提交按钮放入表单内绑定提交事件，适配回车提交的使用习惯：

<form onsubmit="showTag(event)">
    <input type="text" name="message" id="user_input">
    <input type="submit" value="提交">
</form>
<p><span class="tag is-info" style="background-color:#33475b;color:white;" id='display'></span></p>

可选优化（每个词汇为独立tag样式） #

如果需要每个提交的词汇都保留独立的tag样式、带间距展示，可以调整追加逻辑为动态生成新的tag元素：

function showTag(e){
    e?.preventDefault();
    const inputContent = document.getElementById('user_input').value.trim();
    if (!inputContent) return;
    // 生成新的tag元素
    const tagItem = document.createElement('span');
    tagItem.className = 'tag is-info';
    tagItem.style.cssText = 'background-color:#33475b;color:white;margin-right:8px;';
    tagItem.textContent = inputContent;
    // 追加到展示容器
    document.getElementById('display').appendChild(tagItem);
    document.getElementById('user_input').value = '';
}

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