javascript - Dynamically loading HTML and CSS data from another page -
i trying dynamically load html , css data page in website project.
suppose have 2 pages. first 1 onepage.html , second 1 twopage.html. have html , css (css in external sheet) data in twopage.html feed onepage.html.
suppose have structure twopage.html in snippet below:
@import url('http://getbootstrap.com/dist/css/bootstrap.css'); .col-sm-3{ background-color: green; height: 100px; color: white; } <div class="container"> <div class="row"> <div class="col-sm-3"> <p>hello</p> </div> <div class="col-sm-3"> <p>hello</p> </div> <div class="col-sm-3"> <p>hello</p> </div> <div class="col-sm-3"> <p>hello</p> </div> </div> </div> now data in twopage.html dynamic, meaning add set of new divs (in case of example, .col-sm-3) replaces old ones in row class. effect similar appending.
i load inside row class onepage.html (with accompanying css). how that? task javascript have no idea starting point here. methods use? program backend using node.js , express.js (if comes in handy figuring out solution).
don't know if got right... can use jquery , load second file (on same server) via $.get
in onepage.html example:
<script> $(function () { $.get("twopage.html", function (data) { $('.result').html($(data).find('.row').html()); }); }); </script> and div.result element in body paste filtered data:
<div class="result"></div>
Comments
Post a Comment