将html元素简化为js [英] Simplify the html element into js

问题描述

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

我有

<div class='b1'></div><div class='b2'></div><div class='b3'></div><div class='b4'></div>
<div class='e11'></div><div class='e12'></div><div class='e13'></div><div class='e14'></div><div class='e15'></div>...更多元素<div><div id="e2" class="e2">
<div class='b1'></div><div class='b2'></div><div class='b3'></div><div class='b4'></div>
<div class='e11'></div><div class='e12'></div><div class='e13'></div><div class='e14'></div><div class='e15'></div>...更多元素<div>

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

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

谁能给我一个提示?非常感谢！

解决方案

jsFiddle Demo

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

document.createElement("tagname");

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

这是一个简单的例子:

<div id="contentZone"></div><脚本>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 + ") 你好 :D";content.appendChild(d);}c.appendChild(内容);

I am making bunch of elements that look like the same

I have

<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>

They are almost the same and I have several e3 and e4 div...

MY question is if there are anyways to reduce the codes and create them in js with an object (or better approach).

Would anyone gives me a hint? Thanks a lot!

解决方案

jsFiddle Demo

You are going to need to get some iteration parameters, and then make a function which iterates based on those parameters to create these html elements. The primary way do create an html element is

document.createElement("tagname");

and then you are going to need to append them in the order you wish. Once they are done, you can append them to an element on the screen. Avoid appending inside of a loop. Even if you create a lot of elements, they will render quickly if they are only appended onto the screen once instead of each time an element is created.

Here is a simple example:

<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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！