But if you're working on bigger projects: It is possible, but have have to be very principled in how you use it, otherwise you're going to end up with either a massive spaghetti codebase and lots of edge cases in your app that breaks.

Alternatives like React and Rust may add more complexity upfront, but the improved structure and safety it gives has big benefits in all but the smallest projects.

<https://github.com/jquery/jquery/blob/main/src/ajax/load.js>

Then at the vanilla JS 'load' :

  const response = await fetch('/path/to/template.html');
  const body = await response.text();
  document.querySelector('#some.selector').innerHTML = body;

  let result = "   hello jQuery   "
  .trim()
  .replace("jQuery", "javascript")
  .toUpperCase();
  console.log(result);

  let numbers = [1, 2, 3, 4, 5];
  let result = numbers
  .filter(num => num % 2 === 0)
  .map(num => num * 2)
  .reduce((sum, num) => sum + num, 0);
  console.log(result); // 12

  let myStr = "This is a wonderful day.";
  let reversed = myStr
  .split("")
  .reverse()
  .join("");
  console.log(reversed); // ".yad lufrednow a si sihT"
  

  document.querySelector('#element')
  .classList.add('active')
  .classList.remove('hidden');

  class Chainable {
    constructor(value) {
      this.value = value;
    }

    add(num) {
      this.value += num;
      return this; // make it chainable
    }

    multiply(num) {
      this.value *= num;
      return this;
    }

    getValue() {
      return this.value;
    }
  }
  let result = new Chainable(5)
  .add(3)
  .multiply(2)
  .getValue();
  console.log(result); // 16