How do I repeat div classes using JavaScript only?

dom, html, javascript

Solution

It's good you see the use of making a function of a re-occurring pattern.

Before posting it in StackOverflow, have you tried doing it yourself?

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');
}

Edit: JS has changed a lot since the original post. If you do not require compatibility, use `const`, `template literals`, `class` and `querySelector` to make the code a bit cleaner. The following code has a `Builder` class and assumes there is a div with ID 'container':

// 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);
}

Problem

Original source