Vanilla派だからjQueryは使いたくないがjQueryみたく書きたい

jQueryはもうダメだ、jQuery万歳！

単数選択

$('セレクタ') // 戻り値はDOM要素

document.querySelector()とまったく同じ

複数選択

$('*セレクタ') // 戻り値は配列

セレクタの先頭に*を付けると複数選択。
document.querySelectorAll()と同じ処理になるが、戻り値が配列なのが新しい

HTMLCollectionが返ってきて嬉しかったことが一度もないので、戻り値は配列にしました。

要素を1つ作成

$('<p>', '本文' {'属性名': '属性値'}) // 戻り値はDOM要素

// const el = document.createElement('p')
// el.textContent = '本文'
// el.setAttribute('属性名', '属性値')
// と同じ

第1引数に開始タグを渡すと、その要素を作成します。
第2引数には本文の文字列、第3引数には属性をオブジェクトで渡すこともできます。(任意)

戻り値はDOM要素です。

HTML文字列のDOM化

$('HTML文字列') // 戻り値はDocumentFragment

HTML文字列を渡すと、その文字列をDOM化します。
戻り値はDocumentFragmentなので、append()などに渡して挿入してください

ソースコード

関数1つです。
あえてIEには対応してない

function $(selector, text = '', attr = {}){
    if(selector.includes('<')){
        if(selector.match(/^<[\w\-]+>$/)){
            const tagName = selector.slice(1, -1);
            const el = document.createElement(tagName);
            el.textContent = text;
            for(let k in attr){
                el.setAttribute(k, attr[k]);
            }
            return el;
        }
        else{
            const template = document.createElement('template');
            template.innerHTML = selector;
            return template.content;
        }
    }
    else if(selector.startsWith('*')){
        if(selector.length > 1){
            selector = selector.slice(1);
        }
        return Array.from(document.querySelectorAll(selector));
    }
    return document.querySelector(selector);
}