Html 有没有更简单的方法来处理重复的div？_Html

Html 有没有更简单的方法来处理重复的div？

html

Html 有没有更简单的方法来处理重复的div？,html,Html,我一直在致力于创建一系列大约100张或更多的抽认卡，这些抽认卡看起来就像索引卡。为了获得每张卡的蓝色水平线的外观，我为每张卡设置了一个大约20个重复相同div的块。因为每张卡的代码都是相同的，有没有办法用函数调用代码，而不是一遍又一遍地重复？我对编码相当陌生我愿意接受任何关于如何改进这种方法的建议 <p> <li id="10" class="hideable"><div class="tile flipX"> <div class=

我一直在致力于创建一系列大约100张或更多的抽认卡，这些抽认卡看起来就像索引卡。为了获得每张卡的蓝色水平线的外观，我为每张卡设置了一个大约20个重复相同div的块。因为每张卡的代码都是相同的，有没有办法用函数调用代码，而不是一遍又一遍地重复？我对编码相当陌生

我愿意接受任何关于如何改进这种方法的建议

 <p> <li id="10" class="hideable"><div     class="tile flipX">
    <div class="front"><div id="paper">

<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
<div class="line">.<div class="blueline"></div></div>
 <div class="line">.<div class="blueline"></div></div>
 <div class="line">.<div class="blueline"></div></div>
 <div class="line">.<div class="blueline"></div></div>
 <div class="line">.<div class="blueline"></div></div>
 <div class="line">.<div class="blueline"></div></div>
 <div class="line">.<div class="blueline"></div></div>
 <div class="margin"></div>  



<div id="content">
<p class="TOF"> </p>
    </div></div></div>

<div class="back"><div id="paper">

<p>
</p>

     </div></div></li>


.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

唯一可以做到这一点的方法是使用PHP或ASP（或者下面评论中指出的Javascript）。下面是一个示例，说明在使用PHP后如何实现所获得的结果：

基本示例您可以将其用于样式、id、名称、数据或任何您喜欢的内容

注

我没有提供Javascript的例子，因为如果用户在关闭Javascript的情况下浏览网站（这并不像你想象的那么罕见），可能会破坏网站的功能。此外，PHP/ASP还有几个优点，例如将数据库集成到您的网站，并将其与facebook和其他服务连接起来。

您可以这样做

<div id="paper"></div>

<script>
for (i = 0; i < 20; i++) { 
    var para = document.createElement("div");
    var node = document.createTextNode(".");
    para.appendChild(node);
    var element = document.getElementById("paper");
    element.appendChild(para);
}
</script>


对于（i=0；i<20；i++）{
var para=document.createElement（“div”）；
var节点=document.createTextNode（“.”）；
子节点（节点）段；
var元素=document.getElementById（“纸张”）；
要素.附件（第6段）；
}

或者你可以试试这个

<div id="paper"></div>
<script>
  var tag = "<div class='line'>1<div class='blueline'></div></div>";
  var el = document.getElementById("paper");
  for (i = 0; i < 20; i++) { 
    el.innerHTML += tag;
  }
</script>


var tag=“1”；
var el=document.getElementById（“纸张”）；
对于（i=0；i<20；i++）{
el.innerHTML+=标记；
}

请进一步研究，我想我在某个地方看到了与安全缺陷相关的

innerHTML

。

嘿，你忘了附加代码；）。从头开始——隐藏它的是格式。我已经对它进行了编辑，所以它看起来像是一本书，但可能需要一些时间才能被阅读，这不是唯一的方法。您可以使用JavaScript在页面加载时编写HTML。同意，但如果有人关闭了JavaScript？在实践中非常罕见，但是的，这将是一个限制。我的意思是，在理论上，你可能会遇到一个浏览器不支持DIV标记，因为它在版本5之前不是HTML的一部分。另一种选择是使用CSS伪元素来减少您必须编写的HTML的数量。@PhilipWhitehouse并不像您想象的那么少见。我经常在javascript关闭的情况下运行。即使百分比是5%的折扣和95%的折扣，我仍然建议您使用服务器端脚本语言，因为有5%的用户由于选择使用JS而无法使用它off@PhilipWhitehouse更新了我的回答，说这不是唯一的方法，但我关于为什么不使用JS的建议在JS解决方案的底部+1，尽管我对这一点的担忧仍然存在。尽管如此，OP学习JS可能会更容易。

<html>
    <head>
    </head>
    <body>
        <h1>My example page</h1>
        <h2>my cards</h2>
        <?php
            for($i=0;$i<2;$i++){
                echo '<div class="line">' . $i . '<div class="blueline"></div></div>';
            }
        ?>
    </body>
</html>

<html>
    <head>
    </head>
    <body>
        <h1>My example page</h1>
        <h2>my cards</h2>
        <div class="line">0<div class="blueline"></div></div>
        <div class="line">1<div class="blueline"></div></div>
        <div class="line">2<div class="blueline"></div></div>
    </body>
</html>

<div id="paper"></div>

<script>
for (i = 0; i < 20; i++) { 
    var para = document.createElement("div");
    var node = document.createTextNode(".");
    para.appendChild(node);
    var element = document.getElementById("paper");
    element.appendChild(para);
}
</script>

<div id="paper"></div>
<script>
  var tag = "<div class='line'>1<div class='blueline'></div></div>";
  var el = document.getElementById("paper");
  for (i = 0; i < 20; i++) { 
    el.innerHTML += tag;
  }
</script>