javascript - 如何仅使用 JavaScript 重复 div 类？

Question

好吧，我不确定如何表达这个问题，但基本上我想重复我的 div 容器，它有一个“ block ”类，只使用 javascript，没有 HTML(除了启动页面所需的 HTML)。如果我使用 HTML 执行此操作，结果应该完全像这样。

http://jsfiddle.net/nqZjB/1/

   <div class = "blocks"> <!-- Repeats three times -->

然而，正如我在描述中所述，我不想使用任何 HTML，所以这里是我仅使用 javascript 的 fiddle 。

如何使 div 类 block 像在我的 HTML 示例中那样仅使用 javascript 重复三次？当然在现实生活中，我会为此使用 HTML，因为 javascript 是不必要的，但我想用纯 javascript 来做，这样我就可以学习了。另外作为旁注，如果您对我应该如何措辞问题有更好的方法，请告诉我。谢谢(:

http://jsfiddle.net/TbCYH/1/

Answer 1

很高兴您看到了使用重复出现的模式的功能。

在 StackOverflow 发布之前，您是否尝试过自己做？

jsfiddle:http://jsfiddle.net/kychan/W7Jxu/

//    we will use a container to place our blocks.
//     fetch the element by id and store it in a variable.
var container = document.getElementById('container');

function block(mClass, html) {
    //extra html you want to store.
    return '<div class="' + mClass + '">' + html + '</div>';
}

//    code that loops and makes the blocks.
//    first part: creates var i
//    second:     condition, if 'i' is still smaller than three, then loop.
//    third part: increment i by 1;
for (var i = 0; i < 3; i++) {
    // append the result of function 'block()' to the innerHTML
    // of the container.
    container.innerHTML += block('block', 'data');
}

---

编辑:自原始帖子以来，JS 发生了很大变化。如果不需要兼容性，使用const、template literals、class和querySelector让代码有点清洁工。以下代码有一个 Builder 类，并假设有一个 ID 为“container”的 div:

// create class builder.
class Builder {
  //    create constructor, accept an element selector, i.e #container.
  constructor(targetContainerSelector) {
    //  search element by given selector and store it as a property.
    this.targetContainer = document.querySelector(targetContainerSelector);
  }

    //  method to append to innerHtml of target container.
  appendUsingInnerHtml(divAsHtml) {
    this.targetContainer.innerHTML += divAsHtml;
  }

  //    method to append to target container using DOM elements.
  appendUsingDom(divAsDom) {
    this.targetContainer.appendChild(divAsDom);
  }
}

//  constant to hold element selector.
const myTargetContainer = '#container';
//  constant to set the class if required.
const myDivClass = 'my-class';

//  constant to hold the instantiated Builder object.
const builder = new Builder(myTargetContainer);

//  loop 3 times.
for (let i=0; i<3; i++) {
  // call method to append to target container using innerHtml.
    builder.appendUsingInnerHtml(`<div class="${myDivClass}}">innerhtml div text</div>`);


  // OR.. build using DOM objects.

  //    create the div element.
  const div = document.createElement('div');

  //    create text element, add some text to it and append it to created div.
  div.appendChild(document.createTextNode('dom div text'));

  //    call method to append div DOM object to target container.
  builder.appendUsingDom(div);
}