如何使用javascript函数重用HTML代码块？

Question

我试图在多个位置和页面中使用相同的HTML块，同时保持较少的代码行数和较低的冗余度。

基本上，我需要一个与调用该函数时类似的功能，该功能只会将HTML代码加载到页面中-这将在页面加载时完成，因此无需单击或触发它的其他操作。

我不想使用PHP包含。

例：

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

我需要在100多个页面中使用相同的X类，并且其内容相同。

仅插入X类和要自动添加的内部内容的最佳方法是什么？

Answer 1

您可以将代码放在其他.html文件中，然后使用.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>

Answer 2

如果您正在使用任何javascript框架，通常也可以选择。

AngularJS使用指令来处理重复的html代码。 https://docs.angularjs.org/guide/directive

也可能重复以下问题： 如何在每个html页面中重用html代码？

Answer 3

如果您不介意使用肮脏的方法，请尝试此操作。 :)

$（“。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>