create a HTMLCollection

I think this is the proper way of creating HTMLCollection, which is handled by the browser. var docFragment = document.createDocumentFragment(); docFragment.appendChild(node1); docFragment.appendChild(node2); var myHTMLCollection = docFragment.children; Refs.: https://stackoverflow.com/a/35969890/10018427 https://developer.mozilla.org/en-US/docs/Web/API/NodeList https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection https://www.w3schools.com/js/js_htmldom_nodelist.asp

What is an empty element?

But since both these parts are optional, it would mean that nothing (as in, absence of characters) matches this production. That may be true, but the wording in the spec on this issue is quite clear. There are even examples for empty elements in the next paragraph. <IMG align=”left” src=”http://www.w3.org/Icons/WWW/w3c_home” /> <br></br> <br/> So the … Read more

Why is document.getElementById(‘tableId’).innerHTML not working in IE8?

Since the problem is in IE8, see MSDN: The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. (emphasis mine) Colin’s work-around (setting innerText on the td instead of innerHTML on the tr) is a good one in … Read more

What’s wrong with adding properties to DOM Element objects?

Is there a problem adding properties (or methods) directly to DOM Element Objects? Potentially. There is no web standard that says you can add arbitrary properties to DOM nodes. They are ‘host objects’ with browser-specific implementations, not ‘native JavaScript objects’ which according to ECMA-262 you can do what you like with. Other host objects will … Read more

Create a table in SVG

I would simply embed a real table in my SVG: <?xml version=”1.0″ standalone=”yes”?> <svg xmlns=”http://www.w3.org/2000/svg”> <foreignObject x=”10″ y=”10″ width=”100″ height=”150″> <body xmlns=”http://www.w3.org/1999/xhtml”> <table><!– … –></table> </body> </foreignObject> <!– … –> </svg>

Vanilla JS event delegation – dealing with child elements of the target element

Newer browsers Newer browsers support .matches: this.container.addEventListener(‘click’, function(e){ if (e.target.matches(‘#game-again,#game-again *’)) { e.stopPropagation(); self.publish(‘primo:evento’); } }); You can get the unprefixed version with var matches = document.body.matchesSelector || document.body.webkitMatchesSelector || document.body.mozMatchesSelector || document.body.msMatchesSelector || document.body.webkitMatchesSelector And then use .apply for more browsers (Still IE9+). Older browsers Assuming you have to support older browsers, you can … Read more

Screen Coordinates of a element, via Javascript

window.screenX/Y are not supported on IE. But for other browsers, a close approximation of position is: var top = $(“#myelement”).offset().top + window.screenY; var left = $(“#myelement”).offset().left + window.screenX; Exact position depends on what toolbars are visible. You can use the outer/innerWidth and outer/innerHeight properties of the window object to approximate a little closer. IE doesn’t … Read more