插入引导程序模式的HTML无法正确显示

Question

我正在尝试构建一个网页，其中包含从存储在同一台PC上的HTML文件填充的引导程序模式。但是，如这张图片所示，它目前显示得很奇怪

这是我第一次在这里发帖，我是自学成才的，所以如果这是一个愚蠢的错误-抱歉。 我正在尝试建立一个包含故事列表的页面。我希望这些故事能以一种模态开启。为了避免页面本身变得可笑，故事本身被存储在自己的HTML文件中（包括格式设置），并使用javascript-内部HTML插入。 该网页包含bootstrap 4和jquery

相关代码是

<button onclick="fetchStory('Solitude')"> Read </button>

<div class="modal" id="displayStory" tabindex="-1" role="dialog" aria-labelledby="fetchStoryLabel" aria-hidden="true">

    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="fetchStoryLabel">New message</h5>
      </div>
      <div class="modal-body" id="sample">
      </div>
      <div class="modal-footer">
          <center>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </center>
      </div>
    </div>
  </div>


    <script type="text/javascript">
             function fetchStory(story) {
  var modal = $(displayStory)
  modal.find('.modal-title').text(story)
    var story_path = "samples\\" + story + ".html"
    document.getElementById("sample").innerHTML='<object type="text/html" data=' + story_path + '></object>'
    $('#displayStory').modal()

}   

    </script>

如果我直接将HTML传递到模式中，它会按预期显示，但是当使用javascript插入时，它会如上显示。在网页上对其进行检查，我看不出任何区别的原因