I still think it would be better to use JS. You are not taking in consideration the code behind $.
Also you can use querySelector or querySelectorAll to select you tags, ids and classes, hence you don't need document. getElement...
For styles
// Set multiple styles in a single statement
elt.style.cssText = "color: blue; border: 1px solid black";
// Or
elt.setAttribute("style", "color:red; border: 1px solid blue;");
No need to set one style at a time.
Adding html strings, I like this way:
var div = document.createElement('div');
div.innerHTML = '<p>blah</p>';
Toggle
.classList.toggle('className');
Most importantly, you learn js and don't load more code then you need
A front-end developer from Mar del Plata, Argentina. Passionate about CSS, accessibility, and JS. Currently working on "just a small fix", as I've been doing for the last 15 years.
querySelector and getElement are completely different beasts.
querySelectorAll will return a static collection, while getElementsByClassName returns a live collection. This could lead to confusion if you store the results in a variable for later use:
A variable generated with querySelectorAll will contain the elements that fulfilled the selector at the moment the method was called.
A variable generated with getElementsByClassName will contain the elements that fulfilled the selector when it is used (that may be different from the moment the method was called).
Also getElements allow for a single Id or a single class, while query selector can use complex CSS 3 selectors.
And getEllements is a better performer by orders of magnitude
I still think it would be better to use JS. You are not taking in consideration the code behind
$.Also you can use
querySelectororquerySelectorAllto select you tags, ids and classes, hence you don't needdocument. getElement...For styles
No need to set one style at a time.
Adding html strings, I like this way:
Toggle
Most importantly, you learn js and don't load more code then you need
querySelector and getElement are completely different beasts.
querySelectorAll will return a static collection, while getElementsByClassName returns a live collection. This could lead to confusion if you store the results in a variable for later use:
A variable generated with querySelectorAll will contain the elements that fulfilled the selector at the moment the method was called.
A variable generated with getElementsByClassName will contain the elements that fulfilled the selector when it is used (that may be different from the moment the method was called).
Also getElements allow for a single Id or a single class, while query selector can use complex CSS 3 selectors.
And getEllements is a better performer by orders of magnitude
So both tools have their uses
Nice!