Add a complete html to a div

4

How about, I'm trying to add an html file to a div

<!DOCTYPE html>
 <html lang="en">
<head>
    <title>Inicio</title>
</head>
<body>
    <div> <!-- este div donde agregare un html-->
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div>
</body>
</html>

where I will add another html with another content type (with tables for example)

what would be the right way to do it?

    
asked by matteo 05.05.2016 в 20:56
source

4 answers

4

You have to do it with a <iframe>

example:

<iframe id="Example2"
    name="Example2"
    title="Example2"
    width="400"
    height="300"
    frameborder="0"
    scrolling="no"
    marginheight="0"
    marginwidth="0"
    src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593&amp;output=embed">
</iframe>

More data in MDN

    
answered by 05.05.2016 / 21:02
source
4

You can use Javascript:

<script>
  document.getElementById("demo").innerHTML = "Hello <b>world</b>!";
</script>

or JQuery

$("button").click(function(){
  $("#demo").html("Hello <b>world</b>!");
});

You only need something that triggers that event, for example a click and you can change it every time the event is executed. Your div should have the ID "demo"

<div id="demo">
  ...
</div>

You can also do it with php using include:

<div id="demo">
  <?php
    include("ruta_del_html.htmlophp");
  ?>
</div>

I hope it serves you.

    
answered by 05.05.2016 в 21:16
2

You can use AJAX to read the contents of the other HTML file and write it on your page:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("ID_OBJETIVO").innerHTML = xmlhttp.responseText;
    }
}
xmlhttp.open("GET", "URL_DEL_HTML_QUE_QUIERES_LEER", true);
xmlhttp.send();

Or if you use a library like jQuery, you can do something even simpler with features like $ .ajax () or $ .get () :

$.ajax({
    type: "GET",
    url: "URL_DEL_HTML_QUE_QUIERES_LEER",
    success: function(datos) {
        $("#ID_OBJETIVO").html(datos);
    }
})
    
answered by 05.05.2016 в 21:14
0

If the content is a Web Page such as GoogleMaps, as Edgar says, you should use an iframe (which is no longer recommended to use). On the contrary, if the Html code is inside your site, or is a partrialView you can do it using Jquery.

function insertHtml(){
$("#htmlins").html("<span>este codigo html fue insertado</span>")
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="htmlins">
 </div>
<input type="button" value="Insertar Html" onclick="insertHtml()"/>
    
answered by 05.05.2016 в 21:10