<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Test 'html-tag-js'</title> <script src="./dist/Ref.js"></script> <script src="./dist/tag.js"></script> </head> <body> <h1>HTML-TAG-JS</h1> <div id="app"></div> <script> const p = new Ref(); p.onref = () => { console.log(p.el.children[0]); }; p.style.display = 'block'; p.style.color = 'red'; p.style.width = '100px'; p.style.height = '100px'; app.append( tag('button', { textContent: 'This is a button', onclick: () => { p.textContent = 'The button was clicked'; }, }), tag('p', { ref: p, textContent: 'This is a paragraph', attr: { data: undefined, }, children: [ tag('span', { textContent: 'This is a span', }), ['\nThis is a text'], ['\nAnother text'], ], }), tag('span', { children: [null, undefined, tag.text('This is a span'), tag('br')], }), ); app.append( tag('div', { children: [ Promise.resolve([ tag('span', { textContent: 'This is a span promise 1', }), tag('br'), tag('span', { textContent: 'This is a span promise 2', }), tag('br'), tag('span', { textContent: 'This is a span promise 3', }), ]), ], }), ); app.append( tag('div', { children: [ Promise.resolve( tag('span', { textContent: 'This is a span promise 4', }), ), ], }), ); app.append( tag('div', { children: [ [ tag('span', { innerText: 'This is a span\n', }), [ tag('span', { innerText: 'This is a span\n', }), ['This is a text'], tag('br'), ['Another text'], ], tag('br'), ['This is a text'], tag('br'), ['Another text'], ], ], }), ); const text = tag.use('text'); app.append( tag('p', { children: [ tag('div', { textContent: text, }), tag('br'), ...Array(10000) .fill(null) .map(() => text), tag('button', { textContent: 'Click me', onclick: () => { text.value = 'The button was clicked'; }, }), ], }), ); text.onChange = (value) => { console.log(value); }; console.log({ text }); p.style.backgroundColor = 'blue'; p.onref = (ref) => { console.log(ref); }; </script> </body> </html>