How to create my own jQuery-like function?

Question

Take a look at my code below.
As a procedure to get better and learn advanced Javascript coding I am trying to create my own JQuery-like element selector.
I have various attempts to get as close to the original jQuery Syntax, but it's just not right.

To change the inner HTML of the element with the ID "myID" jQuery works like this:
$("#myID").html("blah blah blah");

The notation that looks most similar is as follows:
new $("myID").chtml("blah blah blah");

I tried different things, but I just can't get rid of the "new" keyword.

As far as I know jQuery is written in pure JS, so there has to be a suitable solution for the problem.

I looked at the source code at code.jquery.com, searched for "

Answer 1

I'm not entirely sure what your trying to do but i got some interesting results with the following code.

function $4(id) {
this.obj = document.getElementById(id);
return obj.innerHTML;
}
console.log($4('p2')) //returns p2 info

Answer 2

Thanks, I already completed the JS course and learned a lot from books and w3schools.com.

But the ES6 course is new on SoloLearn. I'll go through it.

Answer 3

Basically I want to be able to call my object's methods WITHOUT creating an instance of it first (using the 'new' keyword)
eg.: $("p1").html("some new text")
instead of: new $("p1").html("some new text")

______________________________
MonicaL I'd like to create a function with more then one return values, depending on the notation.

I want to create my own little library which I can use on my codes as fallback when jQuery is not available.

Right now I only have
Element.innerHTML
but I want to add more. This is just for demonstration.

Your code would break after returning the elements inner HTML, because of the "return" keyword.

For example, I want to add these methods next:

Element.txt(text) to change the inner Text of an element.
Element.value(newValue) to change the value of an (input) element
Element.att(attribute, value) to add a new attribute with value
etc.
See updated code on Attempt 5

Answer 4

\/!ŖŦŁ Thanks for your idea, but it seems that it is depending on jQuery.

Meanwhile I found something very interesting and promising on the web and implemented the idea directly in my code.
Take a look at ATTEMPT 7 to see it in action.
I'm not yet sure if this solves my problem, but after some testing it already looks good and gets the job done.
I'll still try out some things and post the result here.

Here is the link to the article:
http://raganwald.com/2014/07/09/javascript-constructor-problem.html

Answer 5

Kaimi Thanks! That looks quite nice. I have to take a closer look at your code. You've got a lot of shorthand notations there which I don't exactly know. I think I can learn a lot from your code.

Answer 6

👌👍Thanks. I'll have to read about the arrow functions.