How can I reuse HTML code blocks using a javascript function?

Question

I'm trying to use a same HTML block in several places and pages, while keeping in low number of lines of code and a low redundancy.

Basically, I need something that is similar to a function that when it's called, it will just load a HTML code into the page - this will be done on page load, so no click or other actions that needs to trigger it.

I don't want to use PHP include.

Example:

<div class="x">
   <div class="y">
      <div class="z"></div>
   </div>
</div>

I'll need to use the same class X into 100+ pages and it will have the same content.

What's the best method to insert just the X class and the inside content to be added automatically?

In my opinion, if you want to include html and you are using PHP, just use the `include` command. It will include the HTML. If it is static HTML, no parsing will take place. If it is PHP, it will be parsed as PHP. It is a lot less overhead compared to calling functions. — kainaw, Jan 29 '16 at 20:53
Look at frameworks that use a "view helpers", "partials", etc. Template engines too for some ideas. Underneath though its all "includes" in essence. If it ain't broke don't fix it. — ficuscr, Jan 29 '16 at 20:57
I think, you will find the answer here http://stackoverflow.com/questions/17420146/using-javascript-function-to-render-html — Piotr, Jan 29 '16 at 20:58
Consider any 'templating' technics, e.g. http://blog.reybango.com/2010/07/12/jquery-javascript-templates-tutorial-nesting-templates/ — Roman Hutnyk, Jan 29 '16 at 21:01

score 3 · Answer 1 · answered Jan 29 '16 at 20:56

You could put your code in a different .html file and load it with .load() http://api.jquery.com/load/

$('#targetid').load('somewhere/a.html'); // loads the .html in the #targetid

main.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Main page</title>
        <sript src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
             $(function(){
                  $('#commonsection').load('reusablefile.htm');

                  // which is eqvivalent to:
                  //
                  // $.ajax({
                  //     url: 'reusablefile.htm',
                  //     dataType: 'html',
                  //     success: function(data){
                  //         $('#commonsection').html(data);
                  //     }
                  // });
             });
        </script>
     </head>
     <body>
         <div id="commonsection"></div>
     </body>
</html>

reusablefile.html:

<script>
    (function($){ //separate scope to keep everything "private" for each module
        //do additional javascript if required
    })(jQuery);
</script>
<p>...Some non-trivial content...</p>

score 2 · Answer 2 · edited May 23 '17 at 11:52

2

If you have any javascript frameworks in use they usually have an option as well.

AngularJS uses directives to handle repetitive html code. https://docs.angularjs.org/guide/directive

Also possibly repeat question of: How to reuse the html code in every html page?

edited May 23 '17 at 11:52

Community

1
1

answered Jan 29 '16 at 21:00

penguin

724
5
11

score 1 · Answer 3 · answered Jan 29 '16 at 21:11

Try this if you don't mind use the dirty way. :)

$(".reuseTarget").html($(".x").text());

$(".reuseTarget").html($(".x").text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="x">
   <div class="y">
      <div class="z">aabb</div>
   </div>
</div>

<div class="reuseTarget">
  </div>

How can I reuse HTML code blocks using a javascript function?

3 Answers3