Set of async objects for creating DOM elements in Page framework. It's based on the Async Tree Pattern.
npm install @page-libs/dom
npm test
npm run build
Package is already built. So, for using in Page you just need to install it.
const {
// Async objects from the list below
} = require('@page-libs/dom')
new CreatedElement(
'div', 'class="div" id="div1" style="color: deepskyblue; border: 1px solid solid;"', "text"
).call()
new ElementWithAdditionalHTML(
new CreatedElement(
'div', 'class="div" id="div1" style="color: deepskyblue; border: 1px solid solid;"'
), '<div>content</div>'
).call()
new ElementWithAppendedChildren(
document.getElementById('elm-id'),
new CreatedElement(
'div', 'class="div" id="div1" style="color: deepskyblue; border: 1px solid solid;"', "text"
)
).call()
new ElementWithPrependedChildren(
document.getElementById('elm-id'),
new CreatedElement(
'div', 'class="div" id="div1" style="color: deepskyblue; border: 1px solid solid;"', "text"
)
).call()
new ElementWithAppendedText(
new CreatedElement(
'div', 'class="div" id="div1" style="color: deepskyblue; border: 1px solid solid;"', "text"
), "additional text"
).call()
new ElementWithAttributes(
new CreatedElement(
'div', 'class="div" id="div1" style="color: deepskyblue; border: 1px solid solid;"', "text"
), 'name="div"'
).call()
new ElementWithInnerHTML(
new CreatedElement(
'div', 'class="div" id="div1" style="color: deepskyblue; border: 1px solid solid;"'
), '<div>content</div>'
).call()
new ElementWithTextContent(
new CreatedElement(
'div', 'class="div" id="div1" style="color: deepskyblue; border: 1px solid solid;"'
), 'content'
).call()
new RemovedElement(
someElement
).call()
new ReplacedElement(
newElm, oldElm
).call()
a, abbr, acronym, address, applet, area, article, aside, audio, b, base, basefont, bdo, big, blockquote, body, br, button, canvas, caption, center, cite, code, col, colgroup, datalist, dd, del, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, frame, frameset, head, header, h1, h2, h3, h4, h5, h6, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, link, main, map, mark, meta, meter, nav, noscript, object, ol, optgroup, option, p, param, pre, progress, q, s, samp, script, section, select, small, source, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, u, ul, var, video, wbr
// Simple example
// tagName(attrStr, [text])(...children)
new ElementWithAppendedChildren(
document.createElement('div'),
div('class="div" id="div1"')(
h1()(),
a('href="guseyn.com"')(),
div('class="div" id="div2"')(
img('src="image.png"')(),
p('', 'text')()
)
)
).call()