How to add jquery's .html() in vanilla js?

Question

I want to convert jquery to lightweight js. But I get error.

Like I want to use jquery's $('#app').html('test');

var $ = function (method_name) {
return document.querySelector(method_name);
}

$.prototype.html = function (value) {
this.innerHTML = value;
};

$('#app').html('test'); // <--- .html() is not function

How to add .html() in $()?

only $('#app').innerHTML = 'test' is working

Take a look at youmightnotneedjquery.com it has vanilla alternatives for jQuery methods — StackByMe
– StackByMe, Commented Mar 21, 2022 at 8:50
You don't need to convert anything... Why would you want to recreate jquery with your own wrapper class? Your $ function is not even working properly, it would fail for non ID selectors. — cloned
– cloned, Commented Mar 21, 2022 at 8:52
.prototype only makes sense if you used $ with new. $("#app") is an HTMLElement; these don’t have an html method. You could create an instance with new inside the $ function (e.g. by checking new.target), but this can get complex very quickly. Why not simply use the DOM API directly? — Sebastian Simon
– Sebastian Simon, Commented Mar 21, 2022 at 8:54

EzioMercer · Accepted Answer · 2022-03-21 09:16:37Z

0

You can try do it with class:

class MyJQueryObject {
  constructor(query) {
    this.target = document.querySelector(query);
  }
  
  html(newHTML) {
    if (typeof newHTML !== 'undefined') this.target.innerHTML = newHTML;
    return this.target.innerHTML;
  }
}

const $ = function (query) {
  return new MyJQueryObject(query);
}

const target = $('#target');

console.log(target.html());

target.html('It was easy');

<div id="target">Change me if you can</div>

Also with class you can easily add/remove methods. And the best part that you can define html not as function but as property with the help of getters and setters. For me it is more clearly than check if you pass any argument or not. Example of usage:

class MyJQueryObject {
  constructor(query) {
    this.target = document.querySelector(query);
  }
  
  get html() {
    return this.target.innerHTML;
  }
  
  set html(newHTML) {
    this.target.innerHTML = newHTML;
  }
}

const $ = function (query) {
  return new MyJQueryObject(query);
}

const target = $('#target');

console.log(target.html);

target.html = 'It was easy';

<div id="target">Change me if you can</div>

edited Mar 21, 2022 at 9:16

answered Mar 21, 2022 at 9:05

EzioMercer

2,1482 gold badges11 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Peter Seliger Over a year ago

jQuery internally does process lists of elements. In order to come somehow close, the above example code should at least be based on NodeLists and/or arrays and querySelectorAll (and not at all on exclusively document and querySelector). But then again, why does one want to recreate something which is battle tested for already more than 16 years?

EzioMercer Over a year ago

@PeterSeliger I completely agree with you. But it will more complex if I will start write a full correct code, so I decided to show how it can be achieved and hoped that he can extend this class and methods by himself

EzioMercer Over a year ago

@PeterSeliger And may be didn't like how JQuery methods works and he wants to return the custom values which he need :)

Asherguru Over a year ago

Thanks, this works but I need to customize some new functions by using prototype. The reason why I want to re-create is because I want faster performance with very lightweight js. I just found alternative jquery js -> CashJS.

Collectives™ on Stack Overflow

How to add jquery's .html() in vanilla js?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related