将 HTML 元素从一个页面移动到另一个页面答案

【问题标题】：Moving HTML element from one page to another将 HTML 元素从一个页面移动到另一个页面
【发布时间】：2025-12-24 19:55:12
【问题描述】：

我想将一些 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？

【问题讨论】：

你没有？我的意思不是真的，也不是我认为你问的那样。您可能希望从基本的 javascript 教程开始，以便了解您尝试使用的技术及其作用。
这个“感觉”只是一个复制和粘贴给你的“我不想输入”请提供更多的问题上下文。我非常有信心，例如，您没有发布每个页面的整个 HTML（不是那部分重要的）-但例如 page2 上的 WHERE ...
@Mark Schultheiss，我想将它移到 page2 中的 img 标签下方。我确实有两个完整的 HTML 代码。尽管看起来模棱两可，但我编造了这些页面以使其易于理解。

标签： javascript html

【解决方案1】：

假设两个页面在同一个域中，把它放在 page2.html 的结束 body 标签之前：

  <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>

【讨论】：

谢谢，Dane Iracleous，它正在工作，但 page2 的内容已被完全删除并替换为内容 page1。我不会在 page2 中的 img 标签下面。
将答案编辑为追加而不是替换.. 尝试一下
谢谢，Dane 它正在工作我忘记了仅传递 page1 内容的 conatiner[0].innerHTML。

【解决方案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>

【讨论】：

提问者可能需要用更多细节来改进他的问题，但没有提到使用 PHP

【解决方案3】：

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

看看这个集合，对于初学者来说：https://colorlib.com/wp/top-templating-engines-for-javascript/

【讨论】：

【解决方案4】：

我认为对你来说更好的选择是在 grunt 项目中配置 zetzer，https://github.com/brainshave/grunt-zetzer、https://github.com/brainshave/zetzer 或类似的东西，并将你的代码作为块，然后在需要时调用，你可以传递它们 vars、styles 等。 .. 到块，这样你就可以重用大部分代码，它类似于 php 包含但使用 HTML，你得到的结果是你的 HTML 代码和你需要的洞代码。

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：