Moving HTML element from one page to another

Question

I want to move some HTML code from one page to another page and don't want to retype that line of code again. How would I move it? For example:

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>

How could I move all content of class container_para to page2.html using JavaScript?

You don't? I mean not really and not in the way I think you are asking. You might want to start with a basic javascript tutorial so you can get an idea of the technology you are trying to use and what it does. — gforce301, Aug 13 '18 at 20:50
This "feels like" just a copy and paste given your "I do not want to type" Please provide more context to the question. I feel pretty confident that you do not have the entire HTML for each page posted for example (not that that part matters)- but WHERE on page2 for example... — Mark Schultheiss, Aug 13 '18 at 20:51
@Mark Schultheiss, I want to move it below the img tag in page2. I do have an entire HTML code for both. I made-up this pages to become easily understandable even though it seems ambiguous. — Ermias Kidanegebre, Aug 13 '18 at 22:32

Dane Iracleous · Accepted Answer · 2018-08-13T23:37:33.923

1

Assuming both pages are on the same domain, put this right before the ending body tag on 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>

edited Aug 13 '18 at 23:37

answered Aug 13 '18 at 21:25

Dane Iracleous

1,659
2
16
35

thanks, Dane Iracleous, it is working but the content of page2 is completely deleted and replaced with content page1. I won't it beneath img tag in page2. – Ermias Kidanegebre Aug 13 '18 at 22:38
Edited the answer to append instead of replace.. try that – Dane Iracleous Aug 13 '18 at 23:37
Thanks, Dane It is working I forget the conatiner[0].innerHTML in which only the content of page1 is passing. – Ermias Kidanegebre Aug 14 '18 at 10:41

score 0 · Answer 2 · answered Aug 13 '18 at 21:18

0

in HTML its not possible. in PHP you can able to do.

install wamp or xamp server and test php file

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>

answered Aug 13 '18 at 21:18

Mari Magesh

44
4

1

the asker may need to improve his question with more details, but there's no mention to use PHP – Calvin Nunes Aug 13 '18 at 21:27

score 0 · Answer 3 · answered Aug 13 '18 at 21:32

You probably are asking for templating. Templating allows you to write HTML once and then reuse it throughout the site. There are many ways to do it, both on frontend and backend.

Look at this collection, for starters: https://colorlib.com/wp/top-templating-engines-for-javascript/

score 0 · Answer 4 · answered Aug 13 '18 at 21:38

I think the better choice for you is configure zetzer in a grunt project, https://github.com/brainshave/grunt-zetzer, https://github.com/brainshave/zetzer or something similar and make your code as blocks, Invoking then when you need, you can pass them vars, styles etc... to the blocks so you can reuse the most part of your code, it is similiar to php includes but with HTML, the result you get is your HTML code with the hole code you need.

score 0 · Answer 5 · answered Aug 13 '18 at 21:42

Create a separate javascript file that will add the html to the page.

With Jquery it can be done very easily like this:

Add this to the javascript file 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>

Last but not least make sure to include the javascript file on your pages like this:

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

Mark Schultheiss · Answer 6 · 2018-08-14T11:27:51.567

Similar to the accepted answer but uses jQuery and a script tag to hold it for the example but an ajax example for the real thing

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

Moving HTML element from one page to another

6 Answers6

Linked