Question

我想将一些HTML代码从一页移动到另一页，并且不想再次输入该行代码。我将如何移动它？例如：

page1.html：

 <div class="container">
     <img src="img/img1.jpg" alt="image">
     <div class="container_para">
        <p>this is image tag</p>
     </div>
 </div>

page2.html：

 <div class="page2">
    <img src="img/img2.jpg" alt="image">
 </div>

如何使用JavaScript将类container_para的所有内容移至page2.html？

Answer 1

假设两个页面都在同一个域中，请将其放在page2.html的结束正文标记之前：

  <script>
  var req = new XMLHttpRequest();
  req.open('GET', 'page1.html', false);
  req.send(null);
  if(req.status == 200) {
     var parser = new DOMParser();
     var doc = parser.parseFromString(req.responseText, "text/html")
     var eles = doc.getElementsByClassName("container_para");
     var container = document.getElementsByClassName("page2");
     container[0].innerHTML = container[0].innerHTML + eles[0].innerHTML;
  }
  </script>

Answer 2

在HTML中是不可能的。在PHP中您可以做到。

安装wamp或xamp服务器并测试php文件

container.html

     <div class="container_para">
        <p>this is image tag</p>
     </div>

Page1.php

 <div class="container">
     <img src="img/img1.jpg" alt="image">
      <?php include 'container.html';?>
 </div>

Page2.php

 <div class="page2">
    <img src="img/img2.jpg" alt="image">
    <?php include 'container.html';?>
 </div>

Answer 3

您可能正在要求模板。模板使您可以编写一次HTML，然后在整个站点中重复使用它。在前端和后端都有很多方法可以做到这一点。

看看这个收藏，适合初学者：https://colorlib.com/wp/top-templating-engines-for-javascript/

Answer 4

我认为对您来说更好的选择是在https://github.com/brainshave/grunt-zetzer，https://github.com/brainshave/zetzer或类似的项目中配置zetzer，并将代码作为块，然后在需要时调用，可以将其传递给var ，样式等...块，以便您可以重用大部分代码，这与php include类似，但是使用HTML，您得到的结果就是带有所需漏洞代码的HTML代码。

Answer 5

创建一个单独的javascript文件，将html添加到页面中。

使用Jquery可以很容易地做到这一点：

将此添加到javascript文件JS：

$(function(){
    $("img").after('<div class="container_para"><p>this is image tag</p></div>');
})

HTML：

<div class="page2">
    <img src="img/img2.jpg" alt="image">
    <!––  after the page is finished loading jquery will add the html here  -->
</div>

最后但并非最不重要的一点是，请确保在页面上包含如下所示的javascript文件：

<script src="/path/to/this/file.js"></script>

Answer 6

类似于已接受的答案，但使用jQuery和脚本标签将其保存在示例中，但将ajax示例用于真实内容

//using the script template to hold the fragment just for an example
$(function() {
  let ca = $('#hello').html();
  let cac = $(ca).find('.container_para').clone();
  $('.page2').after(cac);
});
// ajax example to get the page if we had a real page (use this in real code)
$(function() {
  $.ajax({
    url: "page1.html",
    dataType: "html",
    type: "GET"
  }).done(function(data) {
    let cac = $(data).find('.container_para').clone();
    $('.page2').after(cac);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script id="hello" type="text/template">
 <p> I am just an example to show it working, ajax would do the same thing<p>
  <div class="container">
    <img src="img/img1.jpg" alt="image1" />
    <div class="container_para">
      <p>this is image tag</p>
    </div>
  </div>
</script>
<div class="page2">
  <img src="img/img2.jpg" alt="image">
</div>

将HTML元素从一页移动到另一页

6 个答案: