Fragment Support

DOMPP also supports DocumentFragment.

Fragments allow multiple nodes to be grouped temporarily without introducing unnecessary wrapper elements into the final DOM tree.

Important

DocumentFragment is a native browser feature.

DOMPP extends fragments with the same chainable mutation APIs used by normal DOM elements.

When inserted into the DOM, fragment children are moved directly into the target container.

The fragment itself does not remain in the final DOM tree.

Fragment Pattern 

const fragment =
  document
    .createDocumentFragment()
    .setChildren(
      document
        .createElement("div")
        .setAttributes({
          class: "item"
        })
        .setText(
          "Fragment Child A"
        ),
      document
        .createElement("div")
        .setAttributes({
          class: "item"
        })
        .setText(
          "Fragment Child B"
        ),
      document
        .createElement("div")
        .setAttributes({
          class: "item"
        })
        .setText(
          "Fragment Child C"
        )
    );

const card =
  document
    .createElement("div")
    .setAttributes({
      class: "card"
    })
    .setChildren(
      fragment
    );

app
  .setChildren(
    card
  );
Notes
  • fragments are native browser structures
  • fragment children are inserted directly into the target DOM tree
  • no extra wrapper element is created
  • DOMPP extends fragments with the same setter APIs as elements

Live Preview