1

我正在制作一堆看起来一样的元素

我有

<div id="e1" class="e1">

        <div class=box>
            <div class='b1'></div>
            <div class='b2'></div>
            <div class='b3'></div>
            <div class='b4'></div>
        </div> 

    <div class='e11'></div>     
    <div class='e12'></div>     
    <div class='e13'></div>     
    <div class='e14'></div>     
    <div class='e15'></div>                                     
        ...more elements
<div>


<div id="e2" class="e2">

        <div class=box>
            <div class='b1'></div>
            <div class='b2'></div>
            <div class='b3'></div>
            <div class='b4'></div>
        </div> 

    <div class='e11'></div>     
    <div class='e12'></div>     
    <div class='e13'></div>     
    <div class='e14'></div>     
    <div class='e15'></div>                                         
        ...more elements
<div>

它们几乎相同，我有几个e3和e4div ...

我的问题是是否有办法减少代码并使用对象（或更好的方法）在 js 中创建它们。

有人能给我提示吗？非常感谢！

4

1 回答 1

1

jsFiddle 演示

您将需要获取一些迭代参数，然后创建一个基于这些参数进行迭代的函数以创建这些 html 元素。创建 html 元素的主要方法是

document.createElement("tagname");

然后您将需要按照您希望的顺序附加它们。完成后，您可以将它们附加到屏幕上的元素。避免在循环内追加。即使您创建了很多元素，如果它们只附加到屏幕上一次而不是每次创建元素时，它们也会快速呈现。

这是一个简单的例子：

<div id="contentZone"></div>
<script>
 var c = document.getElementById("contentZone");
 var content = document.createElement("div");
 for( var i = 0; i < 3; i++ ){
  var d = document.createElement("div");
  d.innerHTML = i + ") Hello :D";
  content.appendChild(d);
 }
 c.appendChild(content);
</script>
于 2013-03-22T22:41:23.880 回答