Question

我正在制作一堆看似相同的元素

我有

<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和e4 div ...

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

有人会给我一个暗示吗？非常感谢！

Answer 1

<强> jsFiddle Demo

您将需要获取一些迭代参数，然后创建一个基于这些参数迭代的函数来创建这些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>

将html元素简化为js

1 个答案: