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

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'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.

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?

Share Improve this question edited Jan 30, 2016 at 10:39 Somnath Muluk 57.9k38 gold badges224 silver badges230 bronze badges asked Jan 29, 2016 at 20:52 Rareș Popescu 812 silver badges5 bronze badges

In my opinion, if you want to include html and you are using PHP, just use the include mand. 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 pared to calling functions. – kainaw Commented Jan 29, 2016 at 20:53
why not setting it in the head as a variable (javascipt) – Derek Pollard Commented Jan 29, 2016 at 20:56
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 Commented Jan 29, 2016 at 20:57
I think, you will find the answer here stackoverflow./questions/17420146/… – Piotr Commented Jan 29, 2016 at 20:58
Consider any 'templating' technics, e.g. blog.reybango./2010/07/12/… – Roman Hutnyk Commented Jan 29, 2016 at 21:01

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

You could put your code in a different .html file and load it with .load() http://api.jquery./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./jquery-latest.js"></script>
        <script>
             $(function(){
                  $('#monsection').load('reusablefile.htm');

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

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

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

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

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

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

<script src="https://ajax.googleapis./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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - How can I reuse HTML code blocks using a javascript function? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)