JavaScript设置InnerText时开头换行丢失问题求助

我在HTML中实现了一个模态框，尝试向其innerText属性追加文本，但发现开头的一处换行被忽略。

预期显示：

class Student{

}
class AG{

}

实际显示：

class Student{ }
class AG{

}

我尝试过增加、删除换行，也试过使用innerHTML属性，均未解决问题。以下是相关代码：

JavaScript代码 #

var generatedCode = "";
var classNameCode = {};

document.getElementById("create-box").addEventListener("click", function() {
  let box = document.createElement("div");
  box.classList.add("box");
  let title = document.createElement("h2");
  title.innerHTML = "Class";
  box.appendChild(title);
  let classTitle = document.createElement('input');
  classTitle.classList.add('class-name-form');
  let classTitleBtn = document.createElement('button');
  classTitleBtn.innerText = "Set Class Name";
  classTitle.classList.add('class-name-btn');
  box.appendChild(classTitle);
  box.appendChild(classTitleBtn);
  document.getElementById("box-container").appendChild(box);
  let createSubclassButton = document.createElement("button");
  createSubclassButton.innerHTML = "Add Method";
  box.appendChild(createSubclassButton);

  // Enable resizing and dragging
  box.addEventListener("mousedown", startDrag);
  box.addEventListener("mousemove", drag);
  box.addEventListener("mouseup", endDrag);
  box.addEventListener("mouseleave", endDrag);

  let offset = [0, 0];
  let isDown = false;

  function startDrag(e) {
    isDown = true;
    offset = [
      this.offsetLeft - e.clientX,
      this.offsetTop - e.clientY
    ];
  }

  function drag(e) {
    if (!isDown) return;
    e.preventDefault();
    this.style.left = (e.clientX + offset[0]) + 'px';
    this.style.top = (e.clientY + offset[1]) + 'px';
  }

  function endDrag(e) {
    isDown = false;
  }

  createSubclassButton.addEventListener("click", function() {
    let subBox = document.createElement("div");
    subBox.classList.add("subbox");
    let subTitle = document.createElement("h2");
    subTitle.innerText = "New Method";
    subBox.append(subTitle);
    document.getElementById("box-container").appendChild(subBox);
    subBox.style.left = box.offsetLeft + box.offsetWidth + 10 + 'px';
    subBox.style.top = box.offsetTop + 'px';

    // Enable resizing and dragging for the subbox
    subBox.addEventListener("mousedown", startDrag);
    subBox.addEventListener("mousemove", drag);
    subBox.addEventListener("mouseup", endDrag);
    subBox.addEventListener("mouseleave", endDrag);
  });

  classTitleBtn.addEventListener("click", function() {
    console.log(classTitle.value);
    classNameCode[classTitle.value] = `\nclass ${classTitle.value} {\n`
  });
});

// MODAL FOR CODE GENERATION
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var modalContent = document.querySelector('.modal-content');

btn.onclick = function() {
  modalContent.innerText = "";
  console.log(classNameCode);
  for (var key in classNameCode) {
    var codeToAppend = `${classNameCode[key]} \n}`;
    console.log(codeToAppend);
    modalContent.innerText += codeToAppend;
  }
  modal.style.display = "block";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

CSS代码 #

body {
  background-size: 40px 40px;
  background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
  background-color: darkgray;
}

#create-box {
  padding: 10px 20px;
  background-color: #4CAF50;
  border-radius: 5px;
  border: none;
  color: white;
}

#create-box:hover {
  background-color: #5dc861;
  cursor: pointer;
}

#create-box:active {
  cursor: pointer
}

.box {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
  border: 1px solid #d3d3d3;
  border-radius: 5px;
  resize: both;
  overflow: auto;
  z-index: 1;
}

.box h2 {
  margin: 0;
  padding: 10px;
}

.subbox {
  width: 100px;
  height: 100px;
  background-color: #f1f1f1;
  border: 1px solid #d3d3d3;
  position: absolute;
  z-index: 1;
  border-radius: 5px;
}

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#myBtn {
  padding: 10px 20px;
  background-color: #4CAF50;
  border-radius: 5px;
  border: none;
  color: white;
}

#myBtn:hover {
  background-color: #5dc861;
  cursor: pointer;
}

#myBtn:active {
  cursor: pointer
}

#buttons {
  text-align: center;
}

HTML代码 #

<div id="buttons">
  <button id="create-box">Create Class</button>
  <button id="myBtn">View Code (C++)</button>
</div>
<div id="box-container"></div>
<div id="myModal" class="modal">
  <div class="modal-content">
    <p></p>
  </div>
</div>
<script src="main.js"></script>

问题根源在于浏览器默认会合并文本中的连续空白字符（包括换行、空格），而你的模态框内容区域没有设置保留空白的样式，导致换行被压缩成空格。同时代码拼接时的多余空格也加剧了这个问题。

步骤1：修复代码拼接逻辑 #

去掉codeToAppend中多余的空格，确保类内部的换行正确：

// 原代码
var codeToAppend = `${classNameCode[key]} \n}`;
// 修改为
var codeToAppend = `${classNameCode[key]}\n}`;

这样每个类的结构会变成\nclass X {\n\n}，保证{和}之间有一个空行。

步骤2：设置模态框内容的空白保留样式 #

有两种方式实现：

方式一：给.modal-content添加CSS样式

在CSS的.modal-content规则中加入white-space: pre-wrap，这样浏览器会保留换行和空格，同时自动换行：

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  white-space: pre-wrap; /* 添加这一行 */
}

方式二：使用<pre>标签包裹代码

修改HTML的模态框结构，用<pre>标签来显示代码，<pre>默认会保留所有空白格式：

<div id="myModal" class="modal">
  <div class="modal-content">
    <pre id="code-display"></pre> <!-- 替换原来的<p> -->
  </div>
</div>

然后修改JavaScript中设置文本的部分，将内容设置到<pre>元素：

// 原代码
var modalContent = document.querySelector('.modal-content');
// 修改为
var modalContent = document.getElementById('code-display');

最终效果 #

修改后，模态框中的代码会正确显示空行，符合预期：

class Student{

}
class AG{

}

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