To this day, I will not use jQuery because there are native DOM methods. However I come across an issue. Those native DOM methods have long names.

1
2
3
4
5
6

const anchorPoint = document.querySelector('#anchor');
const paragraph = document.createElement('p');
const paragraphText = document.createTextNode('Danger Will Robinson!');

paragraph.appendChild(paragraphText);
anchorPoint.appendChild(paragraph);

The previous code is to create an element, append text to the created element, query an element, and then append the created element to the queried element. This seems like a lot of text. Suddenly jQuery syntax is appealing. Compare the next code block to the previous code block.

1

$('#anchor').append('<p>Danger Will Robinson!</p>');

That is much shorter than the native way. But I don’t want to include all of jQuery if I just want basic DOM methods!

Wait a moment. I like doing things on my own. What if I make something that would accomplish the conciseness of jQuery?

At one point in college, I learned about JavaScript Prototypes and immediately invoked function executions (IIFEs). jQuery classically uses prototypes and IIFEs in order to give developers a concise syntax. The advent of module bundlers have changed that a bit. Nevertheless, I was not going to use a bundler; I just needed a quick plugin to have a shorthanded way to manipulate the DOM.

First, the IIFE wrapper and Library init.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

(attach => {
    const UnderdashMethods = { ... }; //show later...

    const init = selector => {
        const UnderDash = Object.create(UnderDashMethods);

        UnderDash.author = 'Andrew Gremlich';
        UnderDash.version = '0.0.1';
        UnderDash.libraryName = 'UnderDash';
        UnderDash.element = undefined;
        UnderDash.selector = selector;

        return UnderDash;
    };

    attach(init);
})(Library => {
    const global = window || document;
    global._ = selector => Library(selector);
});

I’ll do this! Pass into the IIFE a callback function to attach the library to the DOM. The library will be a function that can be called. The function will have a selector as a parameter. In the init function of the library, use the Object.create() method to make an instance of the methods. Attach any metadata to the library. The init function will be called each time the Library is invoked, so then that means I can get a fresh instance of the methods I’ll create.

I’ll make those methods now. They need to provide a shortcut for me to access the DOM. I commonly query elements, create elements, and append nodes to created or queried elements.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

const UnderDashMethods = {
    /**
     * Query an element and return the created Object context.
     */
    query: function() {
        const selected = document.querySelector(this.selector);
        this.element = selected;
        return this;
    },

    /**
     * Create an element and return the created Element
     */
    create: function() {
        const created = document.createElement(this.selector);
        this.element = created;
        return this;
    },

    /**
     * Either append string or element to the given created or selected element.
     */
    give: function(attachee) {
        const isString = typeof attachee === 'string';
        const isElement = attachee.tagName;
        const useAttacheeOrNot = isElement ? attachee : '';
        const textOrAttachee = isString ? document.createTextNode(attachee) : useAttacheeOrNot;

        this.element.appendChild(textOrAttachee);
        return this.element;
    }
};

The query and the create methods are straight forward. Use the DOM methods and return the result. The give method essentially gives an element node or text node to a queried or created element. That give method will use a created or queried element based on if the attachee parameter is text or an element.

So, this mini library that I made does things in a shorter fashion than the old DOM way!

1
2
3
4
5
6
7

_('output')
    .query()
    .give(
        _('p')
            .create()
            .give('Danger Will Robinson!')
    );

It’s not as short as the jQuery way, but I like it more than typing DOM methods. Great! I engineered a small library for my own use case.