dom – Page 61 – Tarik Billa

How do I programmatically set the value of a select box element using JavaScript?

September 12, 2022 by Tarik

You can use this function: function selectElement(id, valueToSelect) { let element = document.getElementById(id); element.value = valueToSelect; } selectElement(‘leaveCode’, ’11’); <select id=”leaveCode” name=”leaveCode”> <option value=”10″>Annual Leave</option> <option value=”11″>Medical Leave</option> <option value=”14″>Long Service</option> <option value=”17″>Leave Without Pay</option> </select> Optionally if you want to trigger onchange event also, you can use : element.dispatchEvent(new Event(‘change’))

Why does jQuery or a DOM method such as getElementById not find the element?

September 12, 2022 by Tarik

The element you were trying to find wasn’t in the DOM when your script ran. The position of your DOM-reliant script can have a profound effect on its behavior. Browsers parse HTML documents from top to bottom. Elements are added to the DOM and scripts are (generally) executed as they’re encountered. This means that order … Read more

jQuery find events handlers registered with an object

September 11, 2022 by Tarik

As of jQuery 1.8, the event data is no longer available from the “public API” for data. Read this jQuery blog post. You should now use this instead: jQuery._data( elem, “events” ); elem should be an HTML Element, not a jQuery object, or selector. Please note, that this is an internal, ‘private’ structure, and shouldn’t … Read more

How can I check if an element exists in the visible DOM?

September 11, 2022 by Tarik

It seems some people are landing here, and simply want to know if an element exists (a little bit different to the original question). That’s as simple as using any of the browser’s selecting method, and checking it for a truthy value (generally). For example, if my element had an id of “find-me”, I could … Read more

For loop for HTMLCollection elements

September 10, 2022 by Tarik

In response to the original question, you are using for/in incorrectly. In your code, key is the index. So, to get the value from the pseudo-array, you’d have to do list[key] and to get the id, you’d do list[key].id. But, you should not be doing this with for/in in the first place. Summary (added in … Read more

Difference between DOM parentNode and parentElement

September 9, 2022 by Tarik

parentElement is new to Firefox 9 and to DOM4, but it has been present in all other major browsers for ages. In most cases, it is the same as parentNode. The only difference comes when a node’s parentNode is not an element. If so, parentElement is null. As an example: document.body.parentNode; // the <html> element … Read more

Include another HTML file in a HTML file

September 8, 2022 by Tarik

In my opinion the best solution uses jQuery: a.html: <html> <head> <script src=”https://stackoverflow.com/questions/8988855/jquery.js”></script> <script> $(function(){ $(“#includedContent”).load(“https://stackoverflow.com/questions/8988855/b.html”); }); </script> </head> <body> <div id=”includedContent”></div> </body> </html> b.html: <p>This is my include file</p> This method is a simple and clean solution to my problem. The jQuery .load() documentation is here.

Detect click outside React component

September 7, 2022 by Tarik

The following solution uses ES6 and follows best practices for binding as well as setting the ref through a method. To see it in action: Hooks Implementation Class Implementation After React 16.3 Class Implementation Before React 16.3 Hooks Implementation: import React, { useRef, useEffect } from “react”; /** * Hook that alerts clicks outside of … Read more

Creating a new DOM element from an HTML string using built-in DOM methods or Prototype

September 7, 2022 by Tarik

Note: most current browsers support HTML <template> elements, which provide a more reliable way of turning creating elements from strings. See Mark Amery’s answer below for details. For older browsers, and node/jsdom: (which doesn’t yet support <template> elements at the time of writing), use the following method. It’s the same thing the libraries use to … Read more

How can I remove all CSS classes using jQuery/JavaScript?

September 7, 2022 by Tarik

$(“#item”).removeClass(); Calling removeClass with no parameters will remove all of the item’s classes. You can also use (but it is not necessarily recommended. The correct way is the one above): $(“#item”).removeAttr(‘class’); $(“#item”).attr(‘class’, ”); $(‘#item’)[0].className=””; If you didn’t have jQuery, then this would be pretty much your only option: document.getElementById(‘item’).className=””;