如何解决DOM中innerText末尾空格被忽略的问题

标签的行为，即：</p><ul><li><strong>保留空白符：</strong> 连续的空白符（包括空格和制表符）不会被合并。</li><li><strong>保留换行符：</strong> 文本中的换行符会直接转换为实际的换行。</li><li><strong>不自动换行：</strong> 文本内容不会自动换行，除非遇到<br>标签或换行符。</li></ul><p>将white-space: pre应用于显示文本的DOM元素，可以确保任何通过innerText添加的空格，无论其位置如何，都将被精确地渲染出来。</p><h4>示例代码：应用CSS样式</h4><p>假设计算器显示屏的DOM元素ID为display，我们可以在CSS中这样设置：</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2359">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/176127601152964.png" alt="Seede AI">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2359">Seede AI</a>
                            <p>AI 驱动的设计工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Seede AI">
                                <span>713</span>
                            </div>
                        </div>
                        <a href="/ai/2359" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Seede AI">
                        </a>
                    </div>
                <pre class="brush:php;toolbar:false;">#display {
  white-space: pre;
  /* 其他样式，如字体、颜色、边框等 */
}

function addToDisplay (string){
  let display = document.querySelector("#display");
  // 原始逻辑中可能包含复杂的空格处理
  // 例如：if (currentNumber == undefined){ display.innerText = currentDisplay + "  " + string; }
  // 或者尝试在字符串内添加额外空格 addToDisplay(" +_");
  display.innerText += string; // 简化后的操作
}

const onClick = function() {
  switch (this.id){
    case "plus":
      // clearCurrentNumber(); // 假设有此函数
      addToDisplay(" + "); // 直接添加包含前后空格的字符串
      break;
    // ... 其他按钮逻辑
  }
};

document.getElementById('plus').onclick = onClick;