Use element.classList .contains method: element.classList.contains(class); This works on all current browsers and there are polyfills to support older browsers too. Alternatively, if you work with older browsers and don’t want to use polyfills to fix them, using indexOf is correct, but you have to tweak it a little: function hasClass(element, className) { return (‘ ‘ … Read more
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); Where referenceNode is the node you want to put newNode after. If referenceNode is the last child within its parent element, that’s fine, because referenceNode.nextSibling will be null and insertBefore handles that case by adding to the end of the list. So: function insertAfter(newNode, referenceNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); } You can test it … Read more
These solutions will work: As mentioned in comments use defer: <script src=”deferMe.js” defer></script> or <body onload=”script();”> or document.onload = function … or even window.onload = function … Note that the last option is a better way to go since it is unobstrusive and is considered more standard.
Chrome, Firefox, Vivaldi and Safari support getEventListeners(domElement) in their Developer Tools console. For majority of the debugging purposes, this could be used. Below is a very good reference to use it: https://developers.google.com/web/tools/chrome-devtools/console/utilities#geteventlisteners Highly voted tip from Clifford Fajardo from the comments: getEventListeners($0) will get the event listeners for the element you have focused on in … Read more
In the question, there existed a race condition between: The browser’s attempt to initialize the drop-down list, ready to have its selected index updated, and Your code to set the selected index Your code was consistently winning this race and attempting to set drop-down selection before the browser was ready, meaning that the bug would … Read more
There are various methods to get an input textbox value directly (without wrapping the input element inside a form element): Method 1 document.getElementById(‘textbox_id’).value to get the value of desired box For example document.getElementById(“searchTxt”).value; Note: Method 2,3,4 and 6 returns a collection of elements, so use [whole_number] to get the desired occurrence. For the first … Read more
Now most browsers support getBoundingClientRect method, which has become the best practice. Using an old answer is very slow, not accurate and has several bugs. The solution selected as correct is almost never precise. This solution was tested on Internet Explorer 7 (and later), iOS 5 (and later) Safari, Android 2.0 (Eclair) and later, BlackBerry, … Read more
Option 1 A: Clearing innerHTML. This approach is simple, but might not be suitable for high-performance applications because it invokes the browser’s HTML parser (though browsers may optimize for the case where the value is an empty string). doFoo.onclick = () => { const myNode = document.getElementById(“foo”); myNode.innerHTML = ”; } <div id=’foo’ style=”height: 100px; … Read more
I know that augmenting native DOM functions isn’t always the best or most popular solution, but this works fine for modern browsers. Element.prototype.remove = function() { this.parentElement.removeChild(this); } NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { for(var i = this.length – 1; i >= 0; i–) { if(this[i] && this[i].parentElement) { this[i].parentElement.removeChild(this[i]); } } } And then … Read more
Update April 2019 jQuery isn’t needed for cookie reading/manipulation, so don’t use the original answer below. Go to https://github.com/js-cookie/js-cookie instead, and use the library there that doesn’t depend on jQuery. Basic examples: // Set a cookie Cookies.set(‘name’, ‘value’); // Read the cookie Cookies.get(‘name’) => // => ‘value’ See the docs on github for details. Before … Read more