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

我试图在几个地方和页面中使用相同的HTML块，同时保持少量的代码行和低冗余度。如何使用JavaScript函数重用HTML代码块？

基本上，我需要的东西类似于一个函数，当它被调用时，它只会加载一个HTML代码到页面中 - 这将在页面加载完成，所以不需要点击或其他需要触发它的动作。

我不想使用PHP包含。

例子：

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

我需要使用相同的类X成超过100页，这将具有相同的内容。

什么是最好的方法来插入只是X类和内部的内容自动添加？

来源

2016-01-29 Rareș Popescu

在我看来，如果你想包括HTML和你正在使用PHP，只是使用'include'命令。它将包含HTML。如果它是静态HTML，则不会进行分析。如果它是PHP，它将被解析为PHP。与调用函数相比，它的开销要少很多。 – kainaw

为什么不把它设置在头部作为变量（javascipt） – Derek

看看使用“视图助手”，“部分”等框架。模板引擎也有一些想法。本质上，它的所有“包含”都在下面。如果它没有损坏，请不要修复它。 – ficuscr

你可以把你的代码在不同的.html文件，并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>

来源

2016-01-29 20:56:52

如果你有任何使用的javascript框架，他们通常也有一个选项。

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

同样的可能重复问题： How to reuse the html code in every html page?

来源

2016-01-29 21:00:20 penguin

试试这个，如果你不介意使用肮脏的方式。 :)

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

来源

2016-01-29 21:11:29

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

回答

相关问题