ElementCreator

This class should be used to create HTMLElements from HTML strings and append or prepend these elements to other HTMLElements. Besides that it is also possible to clear the contents of an element by removing all of its children.

.append()

const htmlElement = ElementCreator.append(childElement, parentElement);

Append an element at the end

// Before
<div class="parent-element">
    <span class="existing-element"></span>
    <span class="existing-element"></span>
</div>

// After
<div class="parent-element">
    <span class="existing-element"></span>
    <span class="existing-element"></span>
    <span class="child-element"></span>
</div>

Append an element after a certain child element

const htmlElement = ElementCreator.append(childElement, parentElement, afterElement);

// Before
<div class="parent-element">
    <span class="existing-element"></span>
    <span class="after-element"></span>
    <span class="existing-element"></span>
</div>

// After
<div class="parent-element">
    <span class="existing-element"></span>
    <span class="after-element"></span>
    <span class="child-element"></span>
    <span class="existing-element"></span>
</div>

.clear()

Clear an element

const htmlElement = ElementCreator.clear(parentElement);

// Before
<div class="parent-element">
    <span class="child-element"></span>
    <span class="child-element"></span>
    <span class="child-element"></span>
</div>

// After
<div class="parent-element"></div>

.create()

Create an element

returns Node|HTMLElement

const htmlElement = ElementCreator.create('<div class="some-class">');

The outerHTML of the returned HTMLElement will look like

<div>
    <div class="some-class"></div>
</div>

.prepend()

Prepend an element at the beginning

const htmlElement = ElementCreator.prepend(childHtmlElement, parentHtmlElement);

// Before
<div class="parent-element">
    <span class="existing-element"></span>
    <span class="existing-element"></span>
</div>

// After
<div class="parent-element">
    <span class="the-prepended-element"></span>
    <span class="existing-element"></span>
    <span class="existing-element"></span>
</div>

Prepend an element before a certain element

const htmlElement = ElementCreator.prepend(childElement, parentElement, beforeElement);

// Before
<div class="parent-element">
    <span class="existing-element"></span>
    <span class="before-element"></span>
    <span class="existing-element"></span>
</div>

// After
<div class="parent-element">
    <span class="existing-element"></span>
    <span class="child-element"></span>
    <span class="before-element"></span>
    <span class="existing-element"></span>
</div>

.append()
.clear()
.create()
.prepend()