如何在 html 中重复一段代码，而无需一次又一次地编写相同的代码答案

【问题标题】：How to repeat a code in html without writing the same code again and again如何在 html 中重复一段代码，而无需一次又一次地编写相同的代码
【发布时间】：2023-03-17 08:11:01
【问题描述】：

好吧，我希望在给定页面上多次显示给定的一段代码，但我希望尽量减少到处重复的冗余代码（简单复制/粘贴）。好吧，我听说有人使用 Javascript 或 JQuery 来存储给定的代码段，比如 HTML 或 CSS，然后他们在他们希望代码出现的任何地方多次使用一些简单的 div 渲染或 标签，我不知道如何使用，即在脚本或 html 中存储信息，然后使用单个 div 或评论将其呈现多个位置。

谁能用一个例子来说明如何做到这一点。有关此类技巧的更多信息将非常有用。

【问题讨论】：

使用服务器端脚本
把代码写在一个函数里，随心所欲地使用！
您是将代码作为纯文本还是实际在页面上运行的代码？
我认为你需要的是一个像 mustache.js coenraets.org/blog/2011/12/… 这样的模板
如果您不介意使用像 PHP 这样的服务器端语言，您可以创建一个包含重复代码的 .html 或 .php 文件，然后在需要的地方使用 include('repeated_code_file.html')粘贴它们。

标签： javascript jquery html css

【解决方案1】：

这里是重复文本的简单JavaScript代码：（可以根据需要修改可能是插入innerHTML）

function repeat(n,Txt){
    for(i=0; i<n;i++)
        document.write(Txt+ char(13)); //char(13) to draw new line
}

只需根据要求在按钮的window.Load 或onclick 上调用此函数..

更新：选中此小提琴以输入重复 HTML fiddle

innerHTML 代码：

function repeat(n,Txt){
    for(i=0; i<n;i++){
        document.getElementById("repeater").innerHTML = 
          document.getElementById("repeater").innerHTML + "<br /> "
           + Txt;
    }
}

【讨论】：

【解决方案2】：

可重用代码示例如下所示（JavaScript 示例）。

var application = {
    addition: function (sum1, sum2) {
        return sum1 + sum2;
    },
    multiplication: function (sum1, sum2) {
        return sum1 * sum2;
    }
};

你可以这样称呼它

application.addition(5, 10); /* returns 15 */

或者更复杂的

application.multiplicaton(application.addition(5, 10), 2) /* returns 30 */

【讨论】：

【解决方案3】：

试试喜欢

<!--#include virtual="/menu.shtml" -->

它将被大多数网络服务器支持。

More Info.

【讨论】：

太好了，我明白了！谢谢:)

【解决方案4】：

看看服务器端includes

将它像这样包含在您的页面中：

<?php include ('content.html'); ?>

【讨论】：

仅供参考，这个问题没有用 php 标记。
可以不用php吗？使用 div 或其他东西，例如可以在任何地方呈现的 addthis div
别担心，我下周要学php，所以我会用这个技巧！谢谢:)
这是最简单的方法 :)...你不需要为此学习 php :) 只需在文件路径中使用这一行;)