JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<h1>Simple jQuery implementation</h1>
<button id="btn0">Test 0</button>
<section>
  <div></div>
  <button id="btn1">Test 1</button>
</section>
<section>
  <div></div>
  <button id="btn2">Test 2</button>
</section>
<hr>
$('pre')[0].html( $('div').html() );<br />
&lt;pre&gt;
<pre></pre>
&lt;/pre&gt;

Babel + JSX

console.clear();

// Simple jQuery implementation
const $ = ::document.querySelectorAll;
{
    let p = Element.prototype;
    p.on = Element.prototype.addEventListener;
    p.find = function(s){ return this.querySelector(s) };
    p.html = function(s){
    		if(!s) return this.innerHTML;
        this.innerHTML = s;
        return this;
    };
		p = NodeList.prototype;
    p.on = function(e,f){
    		this.forEach($=>$.on(e,f));
        return this;
    };
    p.html = function(s) {
    		let a = Array.prototype;
        return a.reduce.call(
        		a.map.call(this, $=>$.html(s)),
            (a, b) => a + b
        );
      	return this;
    };
}

// Usage

let alrt = function(){ alert(this.innerText) };

$('#btn0').on('click', alrt);

$('section > button').on('click', alrt);

$('section > div').html('<span>Set html text</span>');
$('pre')[0].html( $('div').html() );