import {HTML, E} from "https://cdn.jsdelivr.net/gh/katsu-oh/[email protected]/html.js"

The import must be calld before HTML() or E() is called.

new HTML(targetElement)
new HTML`target-element-id`
new HTML()
HTML(targetElement)
HTML`target-element-id`
HTML()

An instance of HTML object with a template element as the root element is created. The template element is set as the current element of the instance of HTML at first.

target

The target element or the ID of the target element to publish. If omitted, publish() must not be called.

A created instance of HTML object.

Function list:
$A, $ABBR, $ACRONYM, $ADDRESS, $APPLET, $AREA, $ARTICLE, $ASIDE, $AUDIO, $B, $BASE, $BASEFONT, $BDI, $BDO, $BIG, $BLOCKQUOTE, $BODY, $BR, $BUTTON, $CANVAS, $CAPTION, $CENTER, $CITE, $CODE, $COL, $COLGROUP, $COMMAND, $DATA, $DATALIST, $DD, $DEL, $DETAILS, $DFN, $DIR, $DIV, $DL, $DT, $EM, $EMBED, $FIELDSET, $FIGCAPTION, $FIGURE, $FONT, $FOOTER, $FORM, $FRAME, $FRAMESET, $H1, $H2, $H3, $H4, $H5, $H6, $HEAD, $HEADER, $HGROUP, $HR, $HTML, $I, $IFRAME, $IMG, $INPUT, $INS, $ISINDEX, $KBD, $KEYGEN, $LABEL, $LEGEND, $LI, $LINK, $LISTING, $MAIN, $MAP, $MARK, $MARQUEE, $MENU, $MENUITEM, $META, $METER, $NAV, $NOBR, $NOEMBED, $NOFRAMES, $NOSCRIPT, $OBJECT, $OL, $OPTGROUP, $OPTION, $OUTPUT, $P, $PARAM, $PICTURE, $PLAINTEXT, $PRE, $PROGRESS, $Q, $RB, $RP, $RT, $RTC, $RUBY, $S, $SAMP, $SCRIPT, $SECTION, $SELECT, $SMALL, $SOURCE, $SPACER, $SPAN, $STRIKE, $STRONG, $STYLE, $SUB, $SUMMARY, $SUP, $TABLE, $TBODY, $TD, $TEMPLATE, $TEXTAREA, $TFOOT, $TH, $THEAD, $TIME, $TITLE, $TR, $TRACK, $TT, $U, $UL, $VAR, $VIDEO, $WBR, $XMP

HTML`target-element-id`.$DIV.$;

An element with the <TAG-NAME> is created and added to the end of the children of the current element of this HTML. The created element is set as the current element of this HTML.

<TAG-NAME>

The name that the element is created with. See Function list.

This HTML.

HTML`target-element-id`.$SPAN.$;
HTML(spanElement1).$BR.$;

The parent of current element of this HTML is set as the the current element of this HTML. It is also necessary for tags that have no end tags.

This HTML.

Function list:
abbr, accept, acceptCharset, accesskey, action, align, alink, allow, allowfullscreen, alt, archive, as, async, autocapitalize, autocomplete, autofocus, autoplay, axis, Background, bgcolor, Border, cellpadding, cellspacing, char, charoff, charset, checked, cite, class, classid, Clear, code, codebase, codetype, Color, cols, colspan, compact, content, contenteditable, controls, coords, crossorigin, data, datetime, declare, decoding, default, defer, dir, dirname, disabled, download, draggable, enctype, enterkeyhint, face, for, form, formaction, formenctype, formmethod, formnovalidate, formtarget, frame, frameborder, headers, Height, hidden, high, href, hreflang, hspace, httpEquiv, id, imagesizes, imagesrcset, inputmode, integrity, is, ismap, itemid, itemprop, itemref, itemscope, itemtype, kind, label, lang, language, link, list, loading, longdesc, loop, low, marginheight, marginwidth, max, maxlength, media, method, min, minlength, multiple, muted, name, nohref, nomodule, nonce, noresize, noshade, novalidate, nowrap, object, open, optimum, pattern, ping, placeholder, playsinline, poster, preload, profile, prompt, readonly, referrerpolicy, rel, required, rev, reversed, rows, rowspan, rules, sandbox, scheme, scope, scrolling, selected, shape, size, sizes, slot, span, spellcheck, src, srcdoc, srclang, srcset, standby, start, step, style, summary, tabindex, target, text, title, translate, type, usemap, valign, value, valuetype, version, vlink, vspace, Width, wrap
*1. 'Background', 'Border', 'Clear', 'Color', 'Height', and 'Width' attributes are upper camel case, because styles with the same names exist.
*2. Attributes with hyphen separated names are implemented in functions with lower camel case names.
*3. Custom data attributes ('data-*') are available by data_().

HTML(divElement).$A.href(url).$;
HTML(divElement).$A.href`http://www.example.com/`.$;

The value is assigned to the attribute with the <attribute-name> of the current element of this HTML. If the attribute is a boolean attribute, the value must be "" or the attribute name.

<attribute-name>

The name of the attribute that the value is assigned to. See Function list.

value

The value assigned to the attribute with the <attribute-name> of the current element of this HTML. If the attribute is a boolean attribute, "" or the attribute name.

This HTML.

HTML(document.body).$DIV.data_(name, value).$;
HTML(document.body).$DIV.data_(name)(value).$;
HTML(document.body).$DIV.data_(name)`value1`.$;
HTML(document.body).$DIV.data_`name1`(value).$;
HTML(document.body).$DIV.data_`name1``value1`.$;

The value is assigned to the custom data attribute with the name of the current element of this HTML.

name

The name of the custom data attribute that the value is assigned to. The name cannot contain uppercase letters. If consisting of multiple words, the name can be separated by hyphens.

value

The value assigned to the custom data attribute with the name of the current element of this HTML.

This HTML.

Function list:
azimuth, background, backgroundAttachment, backgroundColor, backgroundImage, backgroundPosition, backgroundRepeat, border, borderBottom, borderBottomColor, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderLeft, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRight, borderRightColor, borderRightStyle, borderRightWidth, borderSpacing, borderStyle, borderTop, borderTopColor, borderTopStyle, borderTopWidth, borderWidth, bottom, captionSide, clear, clip, color, Content, counterIncrement, counterReset, cue, cueAfter, cueBefore, cursor, direction, display, elevation, emptyCells, float, font, fontFamily, fontSize, fontStyle, fontVariant, fontWeight, height, left, letterSpacing, lineHeight, listStyle, listStyleImage, listStylePosition, listStyleType, margin, marginBottom, marginLeft, marginRight, marginTop, maxHeight, maxWidth, minHeight, minWidth, orphans, outline, outlineColor, outlineStyle, outlineWidth, overflow, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, pageBreakAfter, pageBreakBefore, pageBreakInside, pause, pauseAfter, pauseBefore, pitch, pitchRange, playDuring, position, quotes, richness, right, speak, speakHeader, speakNumeral, speakPunctuation, speechRate, stress, tableLayout, textAlign, textDecoration, textIndent, textTransform, top, unicodeBidi, verticalAlign, visibility, voiceFamily, volume, whiteSpace, widows, width, wordSpacing, zIndex
*1. 'Content' style is upper camel case, because an attribute with the same name exists.
*2. Styles with hyphen separated names are implemented in functions with lower camel case names.

HTML'div-1'.$SPAN.color('red').$;
HTML'div-1'.$SPAN.color`red`.$;

The value is assigned to the style with the <style-name> of the current element of this HTML.

<style-name>

The name of the style that the value is assigned to. See Function list.

value

The value assigned to the style with the <style-name> of the current element of this HTML.

This HTML.

Function list:
on.abort, on.afterprint, on.afterscriptexecute, on.animationcancel, on.animationend, on.animationiteration, on.animationstart, on.appinstalled, on.auxclick, on.beforeinput, on.beforeprint, on.beforescriptexecute, on.beforeunload, on.blur, on.cancel, on.canplay, on.canplaythrough, on.change, on.click, on.close, on.compositionend, on.compositionstart, on.compositionupdate, on.contextmenu, on.copy, on.cuechange, on.cut, on.dblclick, on.devicemotion, on.deviceorientation, on.DOMActivate, on.DOMContentLoaded, on.DOMMouseScroll, on.drag, on.dragend, on.dragenter, on.dragleave, on.dragover, on.dragstart, on.drop, on.durationchange, on.emptied, on.ended, on.enterpictureinpicture, on.error, on.focus, on.focusin, on.focusout, on.formdata, on.fullscreenchange, on.fullscreenerror, on.gamepadconnected, on.gamepaddisconnected, on.gotpointercapture, on.hashchange, on.input, on.invalid, on.keydown, on.keypress, on.keyup, on.languagechange, on.leavepictureinpicture, on.load, on.loadeddata, on.loadedmetadata, on.loadstart, on.lostpointercapture, on.message, on.messageerror, on.mousedown, on.mouseenter, on.mouseleave, on.mousemove, on.mouseout, on.mouseover, on.mouseup, on.mousewheel, on.offline, on.online, on.orientationchange, on.overflow, on.pagehide, on.pageshow, on.paste, on.pause, on.play, on.playing, on.pointercancel, on.pointerdown, on.pointerenter, on.pointerleave, on.pointerlockchange, on.pointerlockerror, on.pointermove, on.pointerout, on.pointerover, on.pointerup, on.popstate, on.progress, on.ratechange, on.readystatechange, on.rejectionhandled, on.reset, on.resize, on.scroll, on.search, on.seeked, on.seeking, on.select, on.selectionchange, on.selectstart, on.show, on.slotchange, on.stalled, on.storage, on.submit, on.suspend, on.timeupdate, on.toggle, on.touchcancel, on.touchend, on.touchmove, on.touchstart, on.transitioncancel, on.transitionend, on.transitionrun, on.transitionstart, on.underflow, on.unhandledrejection, on.unload, on.visibilitychange, on.volumechange, on.waiting, on.webglcontextcreationerror, on.webglcontextlost, on.webglcontextrestored, on.wheel

HTML'sectionA'.$DIV.on.click(handler).$;
HTML'sectionA'.$DIV.on.click(handler, false).$;

The listener is added to the event listeners for the <event-type> on the current element of this HTML.

<event-type>

The event type that the listener is added to the event listeners for. See Function list.

listener

The function or the EventListener object that is added to the event listeners for the <event-type> on the current element of this HTML.

options

Same as options or useCapture of EventTarget.addEventListener().

This HTML.

HTML'sectionA'.$DIV.on.publish(handler).$;
HTML'sectionA'.$DIV.on.publish(handler, false).$;

The listener is added to the event listeners for the event type 'publish' on the current element of this HTML. Event listeners for the event type 'publish' are triggered by calling publish().

listener

The function or the EventListener object that is added to the event listeners for the event type 'publish' on the current element of this HTML.

options

Same as options or useCapture of EventTarget.addEventListener().

This HTML.

HTML(container).$SPAN.color`red`.T(message).$;
HTML(container).$SPAN.color`red`.T`This is a red message.`.$;

The text is added to the end of the contents of the current element of this HTML. The text can contain HTML special characters, they are escaped in this method.

text

The text content that is added to the end of the content of the current element of this HTML.

This HTML.

HTML(container).$DIV.HTML` `.$;
HTML(container).$DIV.HTML(HTML().$SPAN.T`text`.$).$;

The html is added to the end of the contents of the current element of this HTML. The html is the other HTML or a string that contains the HTML code.

html

The other HTML or a string that contains the HTML code that is added to the end of the contents of the current element of this HTML.

This HTML.

HTML'target-id'.$SPAN.T`text`.$.publish();
HTML'target-id'.$SPAN.T`text`.$.publish(true);

The target element that is specified in HTML() or the contents of the target element are replaced with the contents of the root element of this HTML. The event listeners for the event type 'public' on the added elements are called after being replaced.

removeTarget

If true, the contents of the root element are added where the target element is, the target element is removed, else the contents of the root element are added as the contents of target element, the contents of the target element are removed.

const html = HTML().$SPAN.T`text`.$.toString();
alert(HTML().$SPAN.T`text`.$);

The HTML code of the contents of the root element of this HTML is retrieved as a string.

A string that contains the HTML code of the contents of the root element of this HTML.

E`div-target`.style.visibility = "hidden";

The element that the id is assigned to is searched for in the document.

id

The ID that the element that is searched for has.

The element that has the id, or null if no element has the id.