over-engineering document fragments to death

document-fragments.js

  /*
   * Helper function for creating document fragments
   * @param {object} node The DOM node we are creating
   * @param {string} txt The text, if any, that we want directly inside of our DOM node
   * @param {object} nodeAttrs A hash of any attributes we want to set on the DOM node (e.g. className, id, href, etc.)
   * @param {array} childNodes An array of any child elements we want to insert within our DOM node
   * @return {object} elem The DOM element we've built with appropriate text and child nodes
   */
  constructElem = function(node, txt, nodeAttrs, childNodes) {
    var elem = node;
    if (txt) {  // create text node
        elem.appendChild(document.createTextNode(txt));
    }
    if (nodeAttrs) { // set specified attributes on the element
        for (attr in nodeAttrs) {
            elem[attr] = nodeAttrs[attr];
        }
    }
    if (childNodes) {  // nest any child elements
        for (var i = 0; i < childNodes.length; i++) {
            elem.appendChild(childNodes[i]);
        }
    }
    return elem;
  }

  /*
   * Build first, second and third document fragments so they are ready to be appended to the DOM
   * @return {object} fragments All the document fragments ready for later DOM insertion
   */
  buildFragment = function() {
      var fragments = {};

      /* set up elements we need to construct the first new fragment HTML */
      var firstFragment = document.createDocumentFragment(),
        childElems = [
          this.constructElem(document.createElement('h4'), "Discussion Heading", { "className": "for-discussion" }), // heading
          this.constructElem(document.createElement('p'), "Discussion topic question"), // callout text
          this.constructElem(document.createElement('a'), "Discussion call to action link", { "href": "#discussionContainer" }) // anchor link to comments module
        ],
        parentContainer = this.constructElem(document.createElement('div'), null, { "className": 'cut-in custom-comments-inline' }, childElems);

      firstFragment.appendChild(parentContainer);
      fragments.newFragment = newFragment;

      /* set up elements we need to construct the second new fragment HTML */
      var secondFragment = document.createDocumentFragment(),
        secondContainer = this.constructElem(document.createElement('div'), null, {
            "className": "discussionContainer singleRule",
            "id": "discussionContainer"
        });

      secondFragment.appendChild(secondContainer);
      fragments.secondFragment = secondFragment;

      /* set up elements we need to construct the third new fragment HTML */
      var thirdFragment = document.createDocumentFragment(),
        thirdChildElems = [
          this.constructElem(document.createElement('h4'), "Discussion Heading",  { "className": "kicker" }), // kicker
          this.constructElem(document.createElement('p'), "Discussion topic question"), // comment header
          this.constructElem(document.createElement('p'), "Discussion topic question dek for further explanation", { "className": "dek" }) // comment dek
        ],
        thirdContainer = this.constructElem(document.createElement('div'), null,  { "className": "commentsBigQuestion" }, thirdChildElems);

      thirdFragment.appendChild(thirdContainer);
      fragments.thirdFragment = thirdFragment;

      return fragments;
  }