jQuery Force set src attribute for iframe

Use attr $(‘#abc_frame’).attr(‘src’, url) This way you can get and set every HTML tag attribute. Note that there is also .prop(). See .prop() vs .attr() about the differences. Short version: .attr() is used for attributes as they are written in HTML source code and .prop() is for all that JavaScript attached to the DOM element.

How to clone or re-dispatch DOM events?

I know, the question is old, and the OP wanted to avoid creating / initializing approach, but there’s a relatively straightforward way to duplicate events: new_event = new MouseEvent(old_event.type, old_event) If you want more than just mouse events, you could do something like this: new_event = new old_event.constructor(old_event.type, old_event) And in the original context: handler … Read more

scroll events: requestAnimationFrame VS requestIdleCallback VS passive event listeners

Although this question is a little bit older, I want to answer it because I often see scripts, where a lot of these techniques are misused. In general all your asked tools (rAF, rIC and passive listeners) are great tools and won’t vanish soon. But you have to know why to use them. Before I … Read more

Is there ‘element rendered’ event?

The accepted answer is from 2014 and is now outdated. A setTimeout may work, but it’s not the cleanest and it doesn’t necessarily guarantee that the element has been added to the DOM. As of 2018, a MutationObserver is what you should use to detect when an element has been added to the DOM. MutationObservers … Read more

Is Shadow DOM fast like Virtual DOM in React.js?

They are different things for different purposes, so comparing performance doesn’t make sense. Virtual DOM Virtual DOM is about avoiding unnecessary changes to the DOM, which are expensive performance-wise, because changes to the DOM usually cause re-rendering of the page. Virtual DOM also allows to collect several changes to be applied at once, so not … Read more

Add SVG element to existing SVG using DOM

If you want to create an HTML element, use document.createElement function. SVG uses namespace, that’s why you have to use document.createElementNS function. var svg = document.getElementsByTagName(‘svg’)[0]; //Get svg element var newElement = document.createElementNS(“http://www.w3.org/2000/svg”, ‘path’); //Create a path in SVG’s namespace newElement.setAttribute(“d”,”M 0 0 L 10 10″); //Set path’s data newElement.style.stroke = “#000”; //Set stroke colour … Read more

document.createElement(“script”) synchronously

You can create your <script> element with an “onload” handler, and that will be called when the script has been loaded and evaluated by the browser. var script = document.createElement(‘script’); script.onload = function() { alert(“Script loaded and ready”); }; script.src = “http://whatever.com/the/script.js”; document.getElementsByTagName(‘head’)[0].appendChild(script); You can’t do it synchronously. edit — it’s been pointed out that, … Read more