What is Vanilla JS

Forget jQuery, MooTools or Dojo - Vanilla JS is a good alternative!

Anyone who thinks now: "I have to try that!" Should know that there is a very high probability that they have already done it.

First I would like to go into the performance and show some examples from http://vanilla-js.com/.

Selecting an element

Vanilla JSdocument.getElementById ("test-table");
Dojodojo.byId ("test-table");
Prototype JS$ ("Test-table")
Ext JSdelete Ext.elCache [“test-table”]; Ext.get ("test-table");
jQuery$ jq ("# test-table");
YUIYAHOO.util.Dom.get ("test-table");
MooToolsdocument.id ("test-table");

Compared to jQuery, it is very impressive. Anyone who thinks "I know that - just JavaScript" is very close to it!

Hide an element

Vanilla JS

var s = document.getElementById ('thing'). style; s.opacity = 1; (function fade () {(s.opacity - =. 1) <0? s.display = "none": setTimeout (fade, 40)}) ();



<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $('#thing').fadeOut(); </script>

Granted, the source code with jQuery is clearer and shorter, but you can also write your own fade function.

How to use Vanilla JS

To use Vanilla JS just add the following line of code to your HTML file.

<script src="path/to/vanilla.js"></script>

When you're done and want to load your project into an active system, there is an even quicker method for Vanilla JS.

Exactly! No code is needed. Vanilla JS is so famous that all browsers automatically include it.


If you have not yet understood that this is native Javascript, I do not want to withhold it from you.

Vanilla JS is nothing more than native JavaScript.

The campaign is intended to show that it is not always necessary to fall back on one of the numerous JavaScript frameworks, which are now used very inflationarily.