Question

我正在尝试从我的网站项目中的其他页面动态加载HTML和CSS数据。

假设我有2页。第一个是onepage.html，第二个是twopage.html。现在我在twopage.html中有一些HTML和CSS（CSS在外部工作表中）数据，我想将其提供给onepage.html。

假设我有一个twopage.html结构，如下面的代码段所示：

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.col-sm-3{
  background-color: green;
  height: 100px;
  color: white;
}

<div class="container">
  <div class="row">
     <div class="col-sm-3">
       <p>Hello</p>
     </div>
     <div class="col-sm-3">
       <p>Hello</p>
     </div>
     <div class="col-sm-3">
       <p>Hello</p>
     </div>
     <div class="col-sm-3">
       <p>Hello</p>
     </div>
  </div>
</div>

现在twopage.html中的数据是动态的，这意味着我添加了一组新的div（在本例中为.col-sm-3），用{row替换row中的旧数据。 1}}类。这种效果类似于追加。

我想将event.stopPropagation();类中的所有内容加载到onepage.html（附带CSS）。我怎么能这样做？这可能是JavaScript的一项任务，但我不知道这里的起点是什么。有什么方法可以使用？我使用Node.js和Express.js编写后端程序（如果这对于找出解决方案很方便）。

Answer 1

不知道我是否说得对...你可以使用jQuery并通过$.get加载你的第二个文件（在同一台服务器上）

在onepage.html中，例如：

<script>

        $(function () {

            $.get("twopage.html", function (data) {
                $('.result').html($(data).find('.row').html());
            });

        });

</script>

和正文中的div.result元素，用于粘贴已过滤的数据：

<div class="result"></div>

从另一个页面动态加载HTML和CSS数据

1 个答案: