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

我正在尝试从我的网站项目中的另一个页面dynamic加载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中的数据是dynamic的，这意味着我添加了一组新的div （在这个例子中是.col-sm-3 ），它replace了row类中的旧数据。 这种效果类似于追加。

我想加载row类内的所有内容到onepage.html（附带CSS）。 我怎么能这样做？ 这可能是一个JavaScript的任务，但我不知道这里甚至是什么起点。 有什么方法可以使用？ 我使用Node.js和Express.js编写我的后端（如果这可以方便地找出解决scheme）。

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>