CODEWITHSUNDEEP
javascripthtmlbuttoninclude
Ayoub G.
Ayoub G.

Reputation: 33

How can I include an html file in my page by clicking on a button ?

I'm trying to get a page with a simple button that will load the content of another html page on click.

<input type="button" value="Create a square" id="send" onClick="createaquare()" />

What i want is that when i click on the button, the function create a square that is called loads another html file that contains a simple square.

    <div></div>

<style type="text/css">

div
{
    height : 200px;
    width : 200px;
    background: red;
    opacity : 0.3;
}

And each time I click on the button, another square appears. How is that possible using javascript or jquery, ajax, or anyting?

Thank you

Upvotes: 0

Views: 150

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65808

Rather than incur another HTTP call and the complexity of having to go get the contents of a file that will always be the same, it's much better to just generate the squares upon the button click.

By giving all the new divs their own CSS class, you can style them all the same, while leaving all the original divs alone.

Just to be clear, in my example I'm adding the same content to each new square, but if you were to add conditional logic to the click event handler, you can create different content in different squares according to your own logic.

Inject content into the squares using the textContent property if it is just straight text you want added and use the innerHTML property if you want to inject content that needs to be parsed (i.e. your content contains markup -- for example when I add the text "ESPN" to the link, I'm also adding an HTML <br> element).

var btn = document.getElementById("btnMakeSquare");

var counter = 1;

btn.addEventListener("click", function(){

  // Create a new square and configure it:
  var newSquare = document.createElement("div");
  newSquare.id = "newDiv" + counter;
  newSquare.textContent = newSquare.id;
  newSquare.setAttribute("class", "newDiv");
  
  // Now create content for that square (this can be anything)
  var newLink = document.createElement("a");
  newLink.href = "http://espn.com";
  newLink.innerHTML = "<br>ESPN";
  newLink.id = "link" + counter;
  
  // Put the link into the square:
  newSquare.appendChild(newLink);
  
  // Bump up the counter:
  counter++;
  
  // Inject the square (which now contains a link) into the DOM:
  document.body.appendChild(newSquare);
  

});
/* Only the one original div will be affected by this: */
#originalDiv {
    height : 50px;
    width : 50px;
    background: red;
    opacity : 0.3;

}

/* All generated divs will have the following class 
   so they will all look the same. But, none of the
   original divs will have this class, so they won't
   be affected.                                      */
.newDiv {
    height : 75px;
    width : 75px;
    background: blue;
    border:1px solid black;
    font-weight:bold;
    font-size:.1.5em;
    color:yellow;
    text-align:center;
}

/* This only affects links in new squares */
.newDiv > a{
  color:green;

}
<input type="button" value="Create a square" id="btnMakeSquare">
<div id="originalDiv">I'm the original div</div>

Upvotes: 1

Eric Wiener
Eric Wiener

Reputation: 5947

You can use <iframes> to load another webpage on your page. You could use Javascript to keep adding <iframes> of pages inside each other, creating the effect you desire. W3Schools has an article on how to use <iframes>.

Edit: Please note that is definitely not the best way to go about the task at hand. The same effect could be achieved using CSS and Javascript, without the need to load in multiple web pages.

Upvotes: 0

Related Questions