我在HTML中有一个modal，我试图在它的InnerText属性中添加一些文本，但是似乎有一个换行符被忽略了。例如，我希望它是这样的：

class Student{

}
class AG{

}

但事实上，它是：

class Student{ }
class AG{

}

我试着添加更多的换行符，删除一些额外的换行符，但没有任何效果。我试着使用InnterHTML属性，但也没有解决问题。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>

联森：

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);
        // generatedCode = `class ${classTitle.value} {\n\t`
        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;
}