jspage - Archive of obsolete content
.plugins.flash=(function(){var a=($try(function(){return navigator.plugins["shockwave flash"].description; },function(){return new activexobject("shockwaveflash.shockwaveflash").getvariable("$version");})||"0 r0").match(/\d+/g);return{version:parseint(a[0]||0+"."+a[1],10)||0,build:parseint(a[2],10)||0}; })();function $exec(b){if(!b){return b;}if(window.execscript){window.execscript(b);}else{var a=document.createelement("script");a.setattribute("type","text/javascript"); a[(browser.engine.webkit&&browser.engine.version<420)?"innertext":"text"]=b;document.head.appendchild(a);document.head.removechild(a);}return b;}native.uid=1; var $uid=(browser.engine.trident)?function(a){return(a.uid||(a.uid=[native.uid++]))[0];}:function(a){return a.uid||(a.uid=native.uid++);};var window=new native({name:"window",legacy:(brows...
...er.engine.trident)?null:window.window,initialize:function(a){$uid(a); if(!a.element){a.element=$empty;if(browser.engine.webkit){a.document.createelement("iframe");}a.element.prototype=(browser.engine.webkit)?window["[[domelement.prototype]]"]:{}; }a.document.window=a;return $extend(a,window.prototype);},afterimplement:function(b,a){window[b]=window.prototype[b]=a;}});window.prototype={$family:{name:"window"}}; new window(window);var document=new native({name:"document",legacy:(browser.engine.trident)?null:window.document,initialize:function(a){$uid(a);a.head=a.getelementsbytagname("head")[0]; a.html=a.getelementsbytagname("html")[0];if(browser.engine.trident&&browser.engine.version<=4){$try(function(){a.execcommand("backgroundimagecache",false,true); });}if(browser.engine.trident){a.window.attachevent("onunload...
...iminate:function(l){var m=c(this.uid);delete m[l];return this;}});window.addlistener("unload",d);})();element.properties=new hash;element.properties.style={set:function(a){this.style.csstext=a; },get:function(){return this.style.csstext;},erase:function(){this.style.csstext="";}};element.properties.tag={get:function(){return this.tagname.tolowercase(); }};element.properties.html=(function(){var c=document.createelement("div");var a={table:[1,"<table>","</table>"],select:[1,"<select>","</select>"],tbody:[2,"<table><tbody>","</tbody></table>"],tr:[3,"<table><tbody><tr>","</tr></tbody></table>"]}; a.thead=a.tfoot=a.tbody;var b={set:function(){var e=array.flatten(arguments).join("");var f=browser.engine.trident&&a[this.get("tag")];if(f){var g=c;g.innerhtml=f[1]+e+f[2]; for(var d=f[0];d--;){g=g.firstchild;}this.empt...
...ild"].call(this,"2n",a);},selected:function(){return this.selected;},enabled:function(){return(this.disabled===false); }});element.events.domready={onadd:function(a){if(browser.loaded){a.call(this);}}};(function(){var b=function(){if(browser.loaded){return;}browser.loaded=true; window.fireevent("domready");document.fireevent("domready");};window.addevent("load",b);if(browser.engine.trident){var a=document.createelement("div"); (function(){($try(function(){a.doscroll();return document.id(a).inject(document.body).set("html","temp").dispose();}))?b():arguments.callee.delay(50);})(); }else{if(browser.engine.webkit&&browser.engine.version<525){(function(){(["loaded","complete"].contains(document.readystate))?b():arguments.callee.delay(50); })();}else{document.addevent("domcontentloaded",b);}}})();var json=new hash(t...

Choosing the right approach - Learn web development
ample an example that loads a resource via the xmlhttprequest api (run it live, and see the source): function loadasset(url, type, callback) { let xhr = new xmlhttprequest(); xhr.open('get', url); xhr.responsetype = type; xhr.onload = function() { callback(xhr.response); }; xhr.send(); } function displayimage(blob) { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } loadasset('coffee.jpg', 'blob', displayimage); pitfalls nested callbacks can be cumbersome and hard to read (i.e.
...al operations multiple simultaneous operations no no yes see promise.all(), below code example the following code fetches an image from the server and displays it inside an <img> element; see it live also, and see also the source code: fetch('coffee.jpg') .then(response => response.blob()) .then(myblob => { let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); }) .catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); pitfalls promise chains can be complex and hard to parse.
...ction calls have resolved promise.all([coffee, tea, description]).then(values => { console.log(values); // store each value returned from the promises in separate variables; create object urls from the blobs let objecturl1 = url.createobjecturl(values[0]); let objecturl2 = url.createobjecturl(values[1]); let desctext = values[2]; // display the images in <img> elements let image1 = document.createelement('img'); let image2 = document.createelement('img'); image1.src = objecturl1; image2.src = objecturl2; document.body.appendchild(image1); document.body.appendchild(image2); // display the text in a paragraph let para = document.createelement('p'); para.textcontent = desctext; document.body.appendchild(para); }); pitfalls if a promise.all() rejects, then one or more of the pr...
...ion with promise.all()) code example the following example is a refactor of the simple promise example we saw earlier that fetches and displays an image, written using async/await (see it live, and see the source code): async function myfetch() { let response = await fetch('coffee.jpg'); let myblob = await response.blob(); let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } myfetch(); pitfalls you can't use the await operator inside a non-async function, or in the top level context of your code.

Introducing asynchronous JavaScript - Learn web development
let's look at a simple example (see it live here, and see the source): const btn = document.queryselector('button'); btn.addeventlistener('click', () => { alert('you clicked me!'); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); in this block, the lines are executed one after the other: we grab a reference to a <button> element that is already available in the dom.
... an example of an async callback is the second parameter of the addeventlistener() method (as we saw in action above): btn.addeventlistener('click', () => { alert('you clicked me!'); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); the first parameter is the type of event to be listened for, and the second parameter is a callback function that is invoked when the event is fired.
...t another example that loads a resource via the xmlhttprequest api (run it live, and see the source): function loadasset(url, type, callback) { let xhr = new xmlhttprequest(); xhr.open('get', url); xhr.responsetype = type; xhr.onload = function() { callback(xhr.response); }; xhr.send(); } function displayimage(blob) { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); } loadasset('coffee.jpg', 'blob', displayimage); here we create a displayimage() function that simply represents a blob passed to it as an object url, then creates an image to display the url in, appending it to the document's <body>.
... console.log ('starting'); let image; fetch('coffee.jpg').then((response) => { console.log('it worked :)') return response.blob(); }).then((myblob) => { let objecturl = url.createobjecturl(myblob); image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); }).catch((error) => { console.log('there has been a problem with your fetch operation: ' + error.message); }); console.log ('all done!'); the browser will begin executing the code, see the first console.log() statement (starting) and execute it, and then create the image variable.

Build your own function - Learn web development
finally, add the following code inside the curly braces: const html = document.queryselector('html'); const panel = document.createelement('div'); panel.setattribute('class', 'msgbox'); html.appendchild(panel); const msg = document.createelement('p'); msg.textcontent = 'this is a message box'; panel.appendchild(msg); const closebtn = document.createelement('button'); closebtn.textcontent = 'x'; panel.appendchild(closebtn); closebtn.onclick = function() { panel.parentnode.removechild(panel); } this is quite a lot of code to ...
... the first line uses a dom api function called document.queryselector() to select the <html> element and store a reference to it in a constant called html, so we can do things to it later on: const html = document.queryselector('html'); the next section uses another dom api function called document.createelement() to create a <div> element and store a reference to it in a constant called panel.
... const panel = document.createelement('div'); panel.setattribute('class', 'msgbox'); html.appendchild(panel); the next two sections make use of the same createelement() and appendchild() functions we've already seen to create two new elements — a <p> and a <button> — and insert them in the page as children of the panel <div>.
... const msg = document.createelement('p'); msg.textcontent = 'this is a message box'; panel.appendchild(msg); const closebtn = document.createelement('button'); closebtn.textcontent = 'x'; panel.appendchild(closebtn); finally, we use an globaleventhandlers.onclick event handler to make it so that when the button is clicked, some code is run to delete the whole panel from the page — to close the message box.

Client-side storage - Learn web development
ctstore.opencursor().onsuccess = function(e) { // get a reference to the cursor let cursor = e.target.result; // if there is still another data item to iterate through, keep running this code if(cursor) { // create a list item, h3, and p to put each data item inside when displaying it // structure the html fragment, and append it inside the list const listitem = document.createelement('li'); const h3 = document.createelement('h3'); const para = document.createelement('p'); listitem.appendchild(h3); listitem.appendchild(para); list.appendchild(listitem); // put the data from the cursor inside the h3 and para h3.textcontent = cursor.value.title; para.textcontent = cursor.value.body; // store the id of the data item inside ...
...this will be useful later when we want to delete items listitem.setattribute('data-note-id', cursor.value.id); // create a button and place it inside each listitem const deletebtn = document.createelement('button'); listitem.appendchild(deletebtn); deletebtn.textcontent = 'delete'; // set an event handler so that when the button is clicked, the deleteitem() // function is run deletebtn.onclick = deleteitem; // iterate to the next item in the cursor cursor.continue(); } else { // again, if list item is empty, display a 'no notes stored' message if(!list.firstchild) { const listitem = document.createelement('li'); listitem.textcontent = 'no ...
...tem has been deleted transaction.oncomplete = function() { // delete the parent of the button // which is the list item, so it is no longer displayed e.target.parentnode.parentnode.removechild(e.target.parentnode); console.log('note ' + noteid + ' deleted.'); // again, if list item is empty, display a 'no notes stored' message if(!list.firstchild) { let listitem = document.createelement('li'); listitem.textcontent = 'no notes stored.'; list.appendchild(listitem); } }; } the first part of this could use some explaining — we retrieve the id of the record to be deleted using number(e.target.parentnode.getattribute('data-note-id')) — recall that the id of the record was saved in a data-note-id attribute on the <li> when it was first displayed.
... const video = document.createelement('video'); video.controls = true; const source1 = document.createelement('source'); source1.src = mp4url; source1.type = 'video/mp4'; const source2 = document.createelement('source'); source2.src = webmurl; source2.type = 'video/webm'; ...

Arrays - Learn web development
document.queryselector('.output p'); let total = 0; list.innerhtml = ''; totalbox.textcontent = ''; // number 1 'underpants:6.99' 'socks:5.99' 't-shirt:14.99' 'trousers:31.99' 'shoes:23.99'; for (let i = 0; i <= 0; i++) { // number 2 // number 3 // number 4 // number 5 let itemtext = 0; const listitem = document.createelement('li'); listitem.textcontent = itemtext; list.appendchild(listitem); } totalbox.textcontent = 'total: $' + total.tofixed(2); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solu...
...= \'\';\ntotalbox.textcontent = \'\';\n\nlet products = [\'underpants:6.99\',\n \'socks:5.99\',\n \'t-shirt:14.99\',\n \'trousers:31.99\',\n \'shoes:23.99\'];\n\nfor(let i = 0; i < products.length; i++) {\n let subarray = products[i].split(\':\');\n let name = subarray[0];\n let price = number(subarray[1]);\n total += price;\n let itemtext = name + \' — $\' + price;\n\n let listitem = document.createelement(\'li\');\n listitem.textcontent = itemtext;\n list.appendchild(listitem);\n}\n\ntotalbox.textcontent = \'total: $\' + total.tofixed(2);'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ ...
... list.innerhtml = ''; // loop through the array, and display all the search terms in the list for (let i = 0; i < myhistory.length; i++) { itemtext = myhistory[i]; const listitem = document.createelement('li'); listitem.textcontent = itemtext; list.appendchild(listitem); } // if the array length is 5 or more, remove the oldest search term if (myhistory.length >= 5) { // number 2 } // empty the search input and focus it, ready for the next term to be entered searchinput.value = ''; searchinput.focus(); } } </textarea> <div class="playable-buttons...
...searchinput = document.queryselector(\'.output input\');\nconst searchbtn = document.queryselector(\'.output button\');\n\nlist.innerhtml = \'\';\n\nlet myhistory= [];\n\nsearchbtn.onclick = function() {\n if(searchinput.value !== \'\') {\n myhistory.unshift(searchinput.value);\n\n list.innerhtml = \'\';\n\n for(let i = 0; i < myhistory.length; i++) {\n itemtext = myhistory[i];\n const listitem = document.createelement(\'li\');\n listitem.textcontent = itemtext;\n list.appendchild(listitem);\n }\n\n if(myhistory.length >= 5) {\n myhistory.pop();\n }\n\n searchinput.value = \'\';\n searchinput.focus();\n }\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the car...

What is JavaScript? - Learn web development
lowing in your head — just before your closing </head> tag: <script> // javascript goes here </script> now we'll add some javascript inside our <script> element to make the page do something more interesting — add the following code just below the "// javascript goes here" line: document.addeventlistener("domcontentloaded", function() { function createparagraph() { let para = document.createelement('p'); para.textcontent = 'you clicked the button!'; document.body.appendchild(para); } const buttons = document.queryselectorall('button'); for(let i = 0; i < buttons.length ; i++) { buttons[i].addeventlistener('click', createparagraph); } }); save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and pla...
... replace your current <script> element with the following: <script src="script.js" defer></script> inside script.js, add the following script: function createparagraph() { let para = document.createelement('p'); para.textcontent = 'you clicked the button!'; document.body.appendchild(para); } const buttons = document.queryselectorall('button'); for(let i = 0; i < buttons.length ; i++) { buttons[i].addeventlistener('click', createparagraph); } save and refresh your browser, and you should see the same thing!
...it might look something like this: function createparagraph() { let para = document.createelement('p'); para.textcontent = 'you clicked the button!'; document.body.appendchild(para); } <button onclick="createparagraph()">click me!</button> you can try this version of our demo below.
... function createparagraph() { let para = document.createelement('p'); para.textcontent = 'you clicked the button!'; document.body.appendchild(para); } /* 1.

Using the CSS Typed Object Model - Web APIs
('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const defaultcomputedstyles = myelement.computedstylemap(); // iterate thru the map of all the properties and values, adding a <dt> and <dd> for each for (const [prop, val] of defaultcomputedstyles) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(prop)); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode(val)); styleslist.appendchild(cssvalue); } the computedstylemap() method returns a stylepropertymapreadonly object containing the size property, which indicates how many properties are in t...
...ueryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = myelement.computedstylemap(); // array of properties we're interested in const ofinterest = ['font-weight', 'border-left-color', 'color', '--color']; // iterate through our properties of interest for ( let i = 0; i < ofinterest.length; i++ ) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(ofinterest[i])); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode( allcomputedstyles.get(ofinterest[i]))); styleslist.appendchild(cssvalue); } we included border-left-color to demonstrate that, had we included all the properties, every v...
...tedstylemap() const allcomputedstyles = myelement.computedstylemap(); // array of properties we're interested in const ofinterest = ['padding-top', 'margin-bottom', 'font-size', 'font-stretch', 'animation-duration', 'animation-iteration-count', 'width', 'height']; // iterate thru our properties of interest for ( let i = 0; i < ofinterest.length; i++ ) { // create a row const row = document.createelement( 'tr' ); // add the name of the property const cssproperty = document.createelement( 'td' ); cssproperty.appendchild( document.createtextnode( ofinterest[i] ) ); row.appendchild( cssproperty ); // and the unitless value const cssvalue = document.createelement( 'td' ); // shrink long floats to 1 decimal point let propval = allcomputedstyles.get( ofinterest[i...
...propval.tofixed( 1 ) : propval; cssvalue.appendchild(document.createtextnode( propval )); row.appendchild( cssvalue ); // and the type of unit const cssunit = document.createelement( 'td' ); cssunit.appendchild( document.createtextnode( allcomputedstyles.get( ofinterest[i] ).unit )); row.appendchild( cssunit ); //add the row to the table stylestable.appendchild( row ); } for those of you using a non-supporting browser, the above output should looks something like this: property value unit padding-top 0 px margin-bottom 16 px font-size 16 px font-stretch 100 percent animation-duration 0 s animation-iteration-count 1 number ...

Compositing example - Web APIs
var canvas1 = document.createelement("canvas"); var canvas2 = document.createelement("canvas"); var gco = [ 'source-over','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out','destination-atop', 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' ].reverse(); var gcotext = [ 'this is the default setting and draws new shapes on top of the existing canvas content.', 'the new s...
... function createcanvas() { var canvas = document.createelement("canvas"); canvas.style.background = "url("+op_8x8.data+")"; canvas.style.border = "1px solid #000"; canvas.style.margin = "5px"; canvas.width = width/2; canvas.height = height/2; return canvas; } function runcomposite() { var dl = document.createelement("dl"); document.body.appendchild(dl); while(gco.length) { var pop = gco.pop(); var dt = doc...
...ument.createelement("dt"); dt.textcontent = pop; dl.appendchild(dt); var dd = document.createelement("dd"); var p = document.createelement("p"); p.textcontent = gcotext.pop(); dd.appendchild(p); var canvastodrawon = createcanvas(); var canvastodrawfrom = createcanvas(); var canvastodrawresult = createcanvas(); var ctx = canvastodrawresult.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.globalcompositeoperation = pop; ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.globalcompositeoperation = "source-over"; ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ct...
... break; case 4: r = c; g = a; b = v; break; case 5: r = v; g = a; b = b; break; } } return { r: r, g: g, b: b }; }; var createinterlace = function (size, color1, color2) { var proto = document.createelement("canvas").getcontext("2d"); proto.canvas.width = size * 2; proto.canvas.height = size * 2; proto.fillstyle = color1; // top-left proto.fillrect(0, 0, size, size); proto.fillstyle = color2; // top-right proto.fillrect(size, 0, size, size); proto.fillstyle = color2; // bottom-left proto.fillrect(0, size, size, size); proto.fillstyle = color1; // bottom-right ...

Element.classList - Web APIs
examples const div = document.createelement('div'); div.classname = 'foo'; // our starting state: <div class="foo"></div> console.log(div.outerhtml); // use the classlist api to remove and add classes div.classlist.remove("foo"); div.classlist.add("anotherclass"); // <div class="anotherclass"></div> console.log(div.outerhtml); // if visible is set remove it, otherwise add it div.classlist.toggle("visible"); // add/remove visible, depe...
... document.documentelement.firstchild.appendchild(document.createelement('style')).stylesheet.csstext=( '_*{x-uclp:expression(!this.hasownproperty("classlist")&&window[" ucl"](this))}' + // ie6 '[class]{x-uclp/**/:expression(!this.hasownproperty("classlist")&&window[" ucl"](this))}' //ie7-8 ); } })(window); // 3.
...{value: nextindex++, done: false} : {done: true}; }}; }; })(window.domtokenlist.prototype, window.document.createelement("div").classlist); })(window); caveats the polyfill is limited in functionality.
...elements created by document.createelement before they are appended to a parent node) in ie6-7.

HTMLMediaElement.srcObject - Web APIs
const mediastream = await navigator.mediadevices.getusermedia({video: true}); const video = document.createelement('video'); video.srcobject = mediastream; in this example, a new mediasource is assigned to a newly-created <video> element.
... const mediasource = new mediasource(); const video = document.createelement('video'); video.srcobject = mediasource; supporting fallback to the src property the examples below support older browser versions that require you to create an object url and assign it to src if srcobject isn't supported.
... const mediastream = await navigator.mediadevices.getusermedia({video: true}); const video = document.createelement('video'); if ('srcobject' in video) { video.srcobject = mediastream; } else { // avoid using this in new browsers, as it is going away.
... const mediasource = new mediasource(); const video = document.createelement('video'); // older browsers may not have srcobject if ('srcobject' in video) { try { video.srcobject = mediasource; } catch (err) { if (err.name != "typeerror") { throw err; } // even if they do, they may only support mediastream video.src = url.createobjecturl(mediasource); } } else { video.src = url.createobjecturl(mediasource); } specifications specification status comment html living standardthe definition of 'srcobject' in that specification.

<input type="datetime-local"> - HTML: Hypertext Markup Language
; var monthselect = document.queryselector('#month'); var dayselect = document.queryselector('#day'); var hourselect = document.queryselector('#hour'); var minuteselect = document.queryselector('#minute'); // hide fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test whether a new datetime-local input falls back to a text input or not var test = document.createelement('input'); try { test.type = 'datetime-local'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { // hide the native picker and show the fallback nativepicker.style.display = 'none'; fallbackpicker.style.display = 'block'; fallbacklabel.style.display = 'block'; // populate the days and years dynamically // ...
...daynum = 29 : daynum = 28; } // inject the right number of new <option> elements into the day <select> for(i = 1; i <= daynum; i++) { var option = document.createelement('option'); option.textcontent = i; dayselect.appendchild(option); } // if previous day has already been set, set dayselect's value // to that day, to avoid the day jumping back to 1 when you // change the year if(previousday) { dayselect.value = previousday; // if the previous day was set to a high number, say 31, and then // you chose a month with less total days ...
....value === "") { dayselect.value = previousday - 2; } if(dayselect.value === "") { dayselect.value = previousday - 3; } } } function populateyears() { // get this year as a number var date = new date(); var year = date.getfullyear(); // make this year, and the 100 years before it available in the year <select> for(var i = 0; i <= 100; i++) { var option = document.createelement('option'); option.textcontent = year-i; yearselect.appendchild(option); } } function populatehours() { // populate the hours <select> with the 24 hours of the day for(var i = 0; i <= 23; i++) { var option = document.createelement('option'); option.textcontent = (i < 10) ?
... ("0" + i) : i; hourselect.appendchild(option); } } function populateminutes() { // populate the minutes <select> with the 60 hours of each minute for(var i = 0; i <= 59; i++) { var option = document.createelement('option'); option.textcontent = (i < 10) ?

Using shadow DOM - Web Components
if you are attaching a shadow dom to a custom element as part of its constructor (by far the most useful application of the shadow dom), you would use something like this: let shadow = this.attachshadow({mode: 'open'}); when you've attached a shadow dom to an element, manipulating it is a matter of just using the same dom apis as you use for the regular dom manipulation: let para = document.createelement('p'); shadow.appendchild(para); // etc.
... creating the shadow root we first attach a shadow root to the custom element: // create a shadow root let shadow = this.attachshadow({mode: 'open'}); creating the shadow dom structure next, we use some dom manipulation to create the element's internal shadow dom structure: // create spans let wrapper = document.createelement('span'); wrapper.setattribute('class', 'wrapper'); let icon = document.createelement('span'); icon.setattribute('class', 'icon'); icon.setattribute('tabindex', 0); let info = document.createelement('span'); info.setattribute('class', 'info'); // take attribute content and put it inside the info span let text = this.getattribute('data-text'); info.textcontent = text; // insert icon let imgurl; i...
...f(this.hasattribute('img')) { imgurl = this.getattribute('img'); } else { imgurl = 'img/default.png'; } let img = document.createelement('img'); img.src = imgurl; icon.appendchild(img); styling the shadow dom after that we create a <style> element and populate it with some css to style it: // create some css to apply to the shadow dom let style = document.createelement('style'); style.textcontent = ` .wrapper { position: relative; } .info { font-size: 0.8rem; width: 200px; display: inline-block; border: 1px solid black; padding: 10px; background: white; border-radius: 10px; opacity: 0; transition: 0.6s all; position: absolute; bottom: 20px; left: 10px; z-index: 3; } img { width: 1.2rem; } .icon:hover + .info, .icon:focus + .info { opacity: 1; }`; attaching the shad...
... for example, take a look at this code from our popup-info-box-external-stylesheet example (see the source code): // apply external styles to the shadow dom const linkelem = document.createelement('link'); linkelem.setattribute('rel', 'stylesheet'); linkelem.setattribute('href', 'style.css'); // attach the created element to the shadow dom shadow.appendchild(linkelem); note that <link> elements do not block paint of the shadow root, so there may be a flash of unstyled content (fouc) while the stylesheet loads.

Canvas code snippets - Archive of obsolete content
remotecanvas = function() { this.url = 'http://developer.mozilla.org'; }; remotecanvas.canvas_width = 300; remotecanvas.canvas_height = 300; remotecanvas.prototype.load = function() { var windowwidth = window.innerwidth - 25; var iframe; iframe = document.createelement('iframe'); iframe.id = 'test-iframe'; iframe.height = '10px'; iframe.width = windowwidth + 'px'; iframe.style.visibility = 'hidden'; iframe.src = this.url; // here is where the magic happens...
...f the page window.document.body.appendchild(iframe); return; }; remotecanvas.prototype.remotepageloaded = function() { // look back up the iframe by id var ldrframe = document.getelementbyid('test-iframe'); // get a reference to the window object you need for the canvas // drawwindow method var remotewindow = ldrframe.contentwindow; //draw canvas var canvas = document.createelement('canvas'); canvas.style.width = remotecanvas.canvas_width + 'px'; canvas.style.height = remotecanvas.canvas_height + 'px'; canvas.width = remotecanvas.canvas_width; canvas.height = remotecanvas.canvas_height; var windowwidth = window.innerwidth - 25; var windowheight = window.innerheight; var ctx = canvas.getcontext('2d'); ctx.clearrect(0, 0, rem...
... var canvas = document.createelement('canvas'); var ctxt = canvas.getcontext('2d'); function loadimagefile(url, callback) { var image = new image(); image.src = url; return new promise((accept, reject) => { image.onload = accept; image.onerror = reject; }).then(accept => { canvas.width = this.width; canvas.height = this.height; ctxt.clearrect(0, 0, this.width, this.height); ctxt.drawimage(this, 0, 0);...

Monitoring downloads - Archive of obsolete content
s.classes["@mozilla.org/storage/service;1"] .getservice(components.interfaces.mozistorageservice); var dbconn = this.storageservice.opendatabase(this.dbfile); var loglist = document.getelementbyid("loglist"); var statement = dbconn.createstatement("select * from items"); // get all items in table try { while (statement.executestep()) { var row = document.createelement('listitem'); // add the cells to the row var cell = document.createelement('listcell'); var sourcestr = statement.getstring(0); row.setattribute("tooltiptext", sourcestr); sourcestr = sourcestr.slice(sourcestr.lastindexof("/")+1); cell.setattribute("label", sourcestr); // source row.appendchild(cell); cell = document.createelement('list...
...cell'); cell.setattribute("label", (statement.getint64(1) / 1024).tofixed(1) + "kb"); // size cell.setattribute("style", "text-align:right"); row.appendchild(cell); var thedate = new date(statement.getint64(2) / 1000); // start time cell = document.createelement('listcell'); var datestr = thedate.tolocalestring(); cell.setattribute("label", datestr); row.appendchild(cell); thedate = new date(statement.getint64(3)); // end time cell = document.createelement('listcell'); datestr = thedate.tolocalestring(); cell.setattribute("label", datestr); row.appendchild(cell); var speed = statement.getdouble(4) / 1024.0; cell = document.createelement('listcell'); cell.setattribute("label", s...
...peed.tofixed(1) + "kb/sec"); cell.setattribute("style", "text-align:right"); row.appendchild(cell); var status = statement.getint32(5); var style = "color:black"; cell = document.createelement('listcell'); var statusstr; switch(status) { case 0: statusstr = "downloading"; break; case 1: statusstr = "complete"; style = "color:green"; break; case 2: statusstr = "failed"; style = "color:red"; break; case 3: statusstr = "canceled"; style = "color:purple"; break; case 4: statusstr = "paused"; style = "color:blue"; break; case 5: statusstr = "queued";...

Dynamically modifying XUL-based user interface - Archive of obsolete content
it uses document.createelementns() method to create the items, and insertbefore() with appendchild() to insert the created xml elements within the document.
... note: document.createelementns() creates an element, but does not put it anywhere in the document.
... function createmenuitem(alabel) { const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var item = document.createelementns(xul_ns, "menuitem"); // create a new xul menuitem item.setattribute("label", alabel); return item; } var popup = document.getelementbyid("mypopup"); // a <menupopup> element var first = createmenuitem("first item"); var last = createmenuitem("last item"); popup.insertbefore(first, popup.firstchild); popup.appendchild(last); you can also use appendchild() and insertbefore() to move existing elements.

Browser Feature Detection - Archive of obsolete content
dom css 2 100% 98% 67% 71% / 83% 38% / 42% test results cross reference dom core level 1 support for properties/methods in document name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 document.doctype true true true document.implementation true true true document.documentelement true true true document.createelement() true true true document.createdocumentfragment() true true true document.createtextnode() true true true document.createcomment() true true true document.createcdatasection() true false true document.createprocessinginstruction() true false true document.createattribute() true true ...
...: bug 9850) false false document.getelementsbytagname() true true true dom core level 2 support for properties/methods in document name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 document.doctype true true true document.implementation true true true document.documentelement true true true document.createelement() true true true document.createdocumentfragment() true true true document.createtextnode() true true true document.createcomment() true true true document.createcdatasection() true false true document.createprocessinginstruction() true false true document.createattribute() true true ...
... true document.createentityreference()obsolete since gecko 7 true false false document.getelementsbytagname() true true true document.importnode() true false true document.createelementns() true false true document.createattributens() true false true document.getelementsbytagnamens() true false true document.getelementbyid() true true true dom level 1 html support for properties/methods in document name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 document.documentelement true true true document.createelement() true true true document.createdocumentfragment() true true true document.createtextnode() ...

Async scripts for asm.js - Game development
putting async into action getting async compilation is easy: when writing your javascript, just use the async attribute like so: <script async src="file.js"></script> or, to do the same thing via script: var script = document.createelement('script'); script.src = "file.js"; document.body.appendchild(script); (scripts created from script default to async.) the default html shell emscripten generates produces the latter.
... two common situations in which a script is *not* async (as defined by the html spec) are: <script async>code</script> and var script = document.createelement('script'); script.innerhtml = "code"; document.body.appendchild(script); both are counted as 'inline' scripts and get compiled and then run immediately.
...instead of using eval or innerhtml, both of which trigger synchronous compilation, you should use a blob with an object url: var blob = new blob([codestring]); var script = document.createelement('script'); var url = url.createobjecturl(blob); script.onload = script.onerror = function() { url.revokeobjecturl(url); }; script.src = url; document.body.appendchild(script); the setting of src rather than innerhtml is what makes this script async.

Graceful asynchronous programming with Promises - Learn web development
add the following lines inside the curly braces: let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); here we are running the url.createobjecturl() method, passing it as a parameter the blob returned when the second promise fulfills.
...status: ${response.status}`); } else { return response.blob(); } }) .then(myblob => { let objecturl = url.createobjecturl(myblob); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); }) .catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); bear in mind that the value returned by a fulfilled promise becomes the parameter passed to the next .then() block's executor function.
... console.log(values); // store each value returned from the promises in separate variables; create object urls from the blobs let objecturl1 = url.createobjecturl(values[0]); let objecturl2 = url.createobjecturl(values[1]); let desctext = values[2]; // display the images in <img> elements let image1 = document.createelement('img'); let image2 = document.createelement('img'); image1.src = objecturl1; image2.src = objecturl2; document.body.appendchild(image1); document.body.appendchild(image2); // display the text in a paragraph let para = document.createelement('p'); para.textcontent = desctext; document.body.appendchild(para); save and refresh and you should see your ui components all loaded, albeit in a not ...

Looping code - Learn web development
in comments, we've provided you with three code lines that need to be used somewhere inside the loop: const para = document.createelement('p'); — creates a new paragraph.
...g <h2>live output</h2> <div class="output" style="height: 410px;overflow: auto;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 300px;width: 95%"> let output = document.queryselector('.output'); output.innerhtml = ''; // let i = 10; // const para = document.createelement('p'); // para.textcontent = ; // output.appendchild(para); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; b...
...entlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); let jssolution = 'const output = document.queryselector(\'.output\');\noutput.innerhtml = \'\';\n\nlet i = 10;\n\nwhile(i >= 0) {\n let para = document.createelement(\'p\');\n if(i === 10) {\n para.textcontent = \'countdown \' + i;\n } else if(i === 0) {\n para.textcontent = \'blast off!\';\n } else {\n para.textcontent = i;\n }\n\n output.appendchild(para);\n\n i--;\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a...

Working with JSON - Learn web development
first of all, add the following function definition below the previous code: function populateheader(jsonobj) { const myh1 = document.createelement('h1'); myh1.textcontent = jsonobj['squadname']; header.appendchild(myh1); const mypara = document.createelement('p'); mypara.textcontent = 'hometown: ' + jsonobj['hometown'] + ' // formed: ' + jsonobj['formed']; header.appendchild(mypara); } we named the parameter jsonobj, to remind ourselves that this javascript object originated from json.
... creating the hero information cards next, add the following function at the bottom of the code, which creates and displays the superhero cards: function showheroes(jsonobj) { const heroes = jsonobj['members']; for (let i = 0; i < heroes.length; i++) { const myarticle = document.createelement('article'); const myh2 = document.createelement('h2'); const mypara1 = document.createelement('p'); const mypara2 = document.createelement('p'); const mypara3 = document.createelement('p'); const mylist = document.createelement('ul'); myh2.textcontent = heroes[i].name; mypara1.textcontent = 'secret identity: ' + heroes[i].secretidentity; mypara2.textcontent = 'age...
...: ' + heroes[i].age; mypara3.textcontent = 'superpowers:'; const superpowers = heroes[i].powers; for (let j = 0; j < superpowers.length; j++) { const listitem = document.createelement('li'); listitem.textcontent = superpowers[j]; mylist.appendchild(listitem); } myarticle.appendchild(myh2); myarticle.appendchild(mypara1); myarticle.appendchild(mypara2); myarticle.appendchild(mypara3); myarticle.appendchild(mylist); section.appendchild(myarticle); } } to start with, we store the members property of the javascript object in a new variable.

Introduction to client-side frameworks - Learn web development
that could look something like this: function buildtodoitemel(id, name) { const item = document.createelement('li'); const span = document.createelement('span'); const textcontent = document.createtextnode(name); span.appendchild(textcontent) item.id = id; item.appendchild(span); item.appendchild(builddeletebuttonel(id)); return item; } here, we use the document.createelement() method to make our <li>, and several more lines of code to create the properties and children it needs.
...it follows a similar pattern to the one we used to build a list item element: function builddeletebuttonel(id) { const button = document.createelement('button'); const textcontent = document.createtextnode('delete'); button.setattribute('type', 'button'); button.appendchild(textcontent); return button; } this button doesn't do anything yet, but it will later once we decide to implement our delete feature.
... read more about the javascript used in this section: document.createelement() document.createtextnode() document.createdocumentfragment() eventtarget.addeventlistener() node.appendchild() node.removechild() another way to build uis every javascript framework offers a way to write user interfaces more declaratively.

CustomElementRegistry.define() - Web APIs
// create a class for the element class popupinfo extends htmlelement { constructor() { // always call super first in constructor super(); // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create spans var wrapper = document.createelement('span'); wrapper.setattribute('class','wrapper'); var icon = document.createelement('span'); icon.setattribute('class','icon'); icon.setattribute('tabindex', 0); var info = document.createelement('span'); info.setattribute('class','info'); // take attribute content and put it inside the info span var text = this.getattribute('text'); info.textcontent = text; ...
... // insert icon var imgurl; if(this.hasattribute('img')) { imgurl = this.getattribute('img'); } else { imgurl = 'img/default.png'; } var img = document.createelement('img'); img.src = imgurl; icon.appendchild(img); // create some css to apply to the shadow dom var style = document.createelement('style'); style.textcontent = '.wrapper {' + 'position: relative;' + '}' + '.info {' + 'font-size: 0.8rem;' + 'width: 200px;' + 'display: inline-block;' + 'border: 1px solid black;' + 'padding: 10px;' + 'background: white;' ...
...nt words in element's parent element var wcparent = this.parentnode; function countwords(node){ var text = node.innertext || node.textcontent return text.split(/\s+/g).length; } var count = 'words: ' + countwords(wcparent); // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create text node and add word count to it var text = document.createelement('span'); text.textcontent = count; // append it to the shadow root shadow.appendchild(text); // update count when element content changes setinterval(function() { var count = 'words: ' + countwords(wcparent); text.textcontent = count; }, 200) } } // define the new element customelements.define('word-count', wordcount, { extends: 'p' }); <p is="word-coun...

Introduction to the DOM - Web APIs
this function creates a new h1 element, adds text to that element, and then adds the h1 to the tree for this document: <html> <head> <script> // run this function when the document is loaded window.onload = function() { // create a couple of elements in an otherwise empty html page const heading = document.createelement("h1"); const heading_text = document.createtextnode("big head!"); heading.appendchild(heading_text); document.body.appendchild(heading); } </script> </head> <body> </body> </html> fundamental data types this reference tries to describe the various objects and types in simple terms.
...rather than saying, for example, that the document.createelement() method returns an object reference to a node, we just say that this method returns the element that has just been created in the dom.
... document.getelementbyid(id) document.getelementsbytagname(name) document.createelement(name) parentnode.appendchild(node) element.innerhtml element.style.left element.setattribute() element.getattribute() element.addeventlistener() window.content window.onload window.scrollto() testing the dom api this document provides samples for every interface that you can use in your own web development.

Using files from web applications - Web APIs
function handlefiles(files) { for (let i = 0; i < files.length; i++) { const file = files[i]; if (!file.type.startswith('image/')){ continue } const img = document.createelement("img"); img.classlist.add("obj"); img.file = file; preview.appendchild(img); // assuming that "preview" is the div output where the content will be displayed.
...byid("filelist"); fileselect.addeventlistener("click", function (e) { if (fileelem) { fileelem.click(); } e.preventdefault(); // prevent navigation to "#" }, false); fileelem.addeventlistener("change", handlefiles, false); function handlefiles() { if (!this.files.length) { filelist.innerhtml = "<p>no files selected!</p>"; } else { filelist.innerhtml = ""; const list = document.createelement("ul"); filelist.appendchild(list); for (let i = 0; i < this.files.length; i++) { const li = document.createelement("li"); list.appendchild(li); const img = document.createelement("img"); img.src = url.createobjecturl(this.files[i]); img.height = 60; img.onload = function() { url.revokeobjecturl(this.src); } li.appendchild(img); ...
... const info = document.createelement("span"); info.innerhtml = this.files[i].name + ": " + this.files[i].size + " bytes"; li.appendchild(info); } } } this starts by fetching the url of the <div> with the id filelist.

HTMLSelectElement.add() - Web APIs
examples creating elements from scratch var sel = document.createelement("select"); var opt1 = document.createelement("option"); var opt2 = document.createelement("option"); opt1.value = "1"; opt1.text = "option: value 1"; opt2.value = "2"; opt2.text = "option: value 2"; sel.add(opt1, null); sel.add(opt2, null); /* produces the following, conceptually: <select> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </s...
... append to an existing collection var sel = document.getelementbyid("existinglist"); var opt = document.createelement("option"); opt.value = "3"; opt.text = "option: value 3"; sel.add(opt, null); /* takes the existing following select object: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> and changes it to: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> <option value="3">option: value 3</option> </select> */ the before parameter is optional.
... inserting to an existing collection var sel = document.getelementbyid("existinglist"); var opt = document.createelement("option"); opt.value = "3"; opt.text = "option: value 3"; sel.add(opt, sel.options[1]); /* takes the existing following select object: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> and changes it to: <select id="existinglist"> <option value="1">option: value 1</option> <option value="3">option: value 3</option> <option value="2">option: value 2</option> </select> */ specifications specification status comment html living standardthe definition of 'htmlselectelement.add()' in that specification.

Index - Web APIs
882 document.createelement() api, dom, document, method, reference, createelement in an html document, the document.createelement() method creates the html element specified by tagname, or an htmlunknownelement if tagname isn't recognized.
... 883 document.createelementns() api, dom, method, reference creates an element with the specified namespace uri and qualified name.
...it is functionally equivalent to document.createelement('img').

Timing element visibility with the Intersection Observer API - Web APIs
function createarticle(contents) { let articleelem = document.createelement("article"); articleelem.id = nextarticleid; let titleelem = document.createelement("h2"); titleelem.id = nextarticleid; titleelem.innertext = "article " + nextarticleid + " title"; articleelem.appendchild(titleelem); articleelem.innerhtml += contents; nextarticleid +=1 ; return articleelem; } first, the <article> element is created and its id is set to the unique value nextart...
...fe's layout gets complicated, send flowers." } ]; let adbox, title, body, timerelem; let ad = ads[math.floor(math.random()*ads.length)]; if (replacebox) { adobserver.unobserve(replacebox); adbox = replacebox; title = replacebox.queryselector(".title"); body = replacebox.queryselector(".body"); timerelem = replacebox.queryselector(".timer"); } else { adbox = document.createelement("div"); adbox.classname = "ad"; title = document.createelement("h2"); body = document.createelement("p"); timerelem = document.createelement("div"); adbox.appendchild(title); adbox.appendchild(body); adbox.appendchild(timerelem); } adbox.style.backgroundcolor = ad.bgcolor; title.classname = "title"; body.classname = "body"; title.innertext = ad.title; bod...
...for new ads being appended to the page, this is created using document.createelement().

Node.insertBefore() - Web APIs
example example 1 <div id="parentelement"> <span id="childelement">foo bar</span> </div> <script> // create the new node to insert let newnode = document.createelement("span") // get a reference to the parent node let parentdiv = document.getelementbyid("childelement").parentnode // begin test case [ 1 ] : existing childelement (all works correctly) let sp2 = document.getelementbyid("childelement") parentdiv.insertbefore(newnode, sp2) // end test case [ 1 ] // begin test case [ 2 ] : childelement is of type undefined let sp2 = undefined // non-existent node ...
... ] // begin test case [ 3 ] : childelement is of type "undefined" ( string ) let sp2 = "undefined" // non-existent node of id "childelement" parentdiv.insertbefore(newnode, sp2) // generates "type error: invalid argument" // end test case [ 3 ] </script> example 2 <div id="parentelement"> <span id="childelement">foo bar</span> </div> <script> // create a new, plain <span> element let sp1 = document.createelement("span") // get the reference element let sp2 = document.getelementbyid("childelement") // get the parent element let parentdiv = sp2.parentnode // insert the new element into before sp2 parentdiv.insertbefore(sp1, sp2) </script> note: there is no insertafter() method.
... // get the parent element let parentelement = document.getelementbyid('parentelement') // get the parent's first child let thefirstchild = parentelement.firstchild // create a new element let newelement = document.createelement("div") // insert the new element before the first child parentelement.insertbefore(newelement, thefirstchild) when the element does not have a first child, then firstchild is null.

ParentNode.prepend() - Web APIs
examples prepending an element var parent = document.createelement("div"); var p = document.createelement("p"); var span = document.createelement("span"); parent.append(p); parent.prepend(span); console.log(parent.childnodes); // nodelist [ <span>, <p> ] prepending text var parent = document.createelement("div"); parent.append("some text"); parent.prepend("headline: "); console.log(parent.textcontent); // "headline: some text" appending an element and text...
... var parent = document.createelement("div"); var p = document.createelement("p"); parent.prepend("some text", p); console.log(parent.childnodes); // nodelist [ #text "some text", <p> ] parentnode.prepend() is unscopable the prepend() method is not scoped into the with statement.
... var parent = document.createelement("div"); with(parent) { prepend("foo"); } // referenceerror: prepend is not defined polyfill you can polyfill the prepend() method if it's not available: // source: https://github.com/jserz/js_piece/blob/master/dom/parentnode/prepend()/prepend().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('prepend')) { return; } object.defineproperty(item, 'prepend', { configurable: true, enumerable: true, writable: true, value: function prepend() { var argarr = array.prototype.slice.call(arguments), docfrag = document.createdocumentfragment(); argarr.foreach(function (argitem) { var isnode = argitem instanceof node; doc...

Creating a cross-browser video player - Developer guides
var supportsvideo = !!document.createelement('video').canplaytype; if (supportsvideo) { // set up custom controls // ...
... to detect if a browser actually supports the fullscreen api and that it is enabled, the following may be called: var fullscreenenabled = !!(document.fullscreenenabled || document.mozfullscreenenabled || document.msfullscreenenabled || document.webkitsupportsfullscreen || document.webkitfullscreenenabled || document.createelement('video').webkitrequestfullscreen); this simply tests all the different prefixed (and of course the non-prefixed!) booleans to see if fullscreen is possible.
... the final tested value, document.createelement('video').webkitrequestfullscreen is required for the last presto version of opera (12.14).

<input type="date"> - HTML: Hypertext Markup Language
); var fallbacklabel = document.queryselector('.fallbacklabel'); var yearselect = document.queryselector('#year'); var monthselect = document.queryselector('#month'); var dayselect = document.queryselector('#day'); // hide fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test whether a new date input falls back to a text input or not var test = document.createelement('input'); try { test.type = 'date'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { // hide the native picker and show the fallback nativepicker.style.display = 'none'; fallbackpicker.style.display = 'block'; fallbacklabel.style.display = 'block'; // populate the days and years dynamically // (the month...
...daynum = 29 : daynum = 28; } // inject the right number of new <option> elements into the day <select> for(i = 1; i <= daynum; i++) { var option = document.createelement('option'); option.textcontent = i; dayselect.appendchild(option); } // if previous day has already been set, set dayselect's value // to that day, to avoid the day jumping back to 1 when you // change the year if(previousday) { dayselect.value = previousday; // if the previous day was set to a high number, say 31, and then // you chose a month with less total days ...
....value === "") { dayselect.value = previousday - 2; } if(dayselect.value === "") { dayselect.value = previousday - 3; } } } function populateyears() { // get this year as a number var date = new date(); var year = date.getfullyear(); // make this year, and the 100 years before it available in the year <select> for(var i = 0; i <= 100; i++) { var option = document.createelement('option'); option.textcontent = year-i; yearselect.appendchild(option); } } // when the month or year <select> values are changed, rerun populatedays() // in case the change affected the number of available days yearselect.onchange = function() { populatedays(monthselect.value); } monthselect.onchange = function() { populatedays(monthselect.value); } //preserve day selection var ...

<input type="time"> - HTML: Hypertext Markup Language
be prepared for this situation to arise: const input = document.createelement('input'); input.type = 'time'; input.min = '23:00'; input.max = '01:00'; input.value = '23:59'; if (input.validity.valid && input.type === 'time') { // <input type=time> reversed range supported } else { // <input type=time> reversed range unsupported } making times required in addition, you can use the required attribute to make filling in the time mandatory.
...= document.queryselector('.fallbacktimepicker'); var fallbacklabel = document.queryselector('.fallbacklabel'); var hourselect = document.queryselector('#hour'); var minuteselect = document.queryselector('#minute'); // hide fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test whether a new date input falls back to a text input or not var test = document.createelement('input'); try { test.type = 'time'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { // hide the native picker and show the fallback nativepicker.style.display = 'none'; fallbackpicker.style.display = 'block'; fallbacklabel.style.display = 'block'; // populate the hours and minutes dynamically populateho...
...urs(); populateminutes(); } function populatehours() { // populate the hours <select> with the 6 open hours of the day for(var i = 12; i <= 18; i++) { var option = document.createelement('option'); option.textcontent = i; hourselect.appendchild(option); } } function populateminutes() { // populate the minutes <select> with the 60 minutes of each hour for(var i = 0; i <= 59; i++) { var option = document.createelement('option'); option.textcontent = (i < 10) ?

HTML to DOM - Archive of obsolete content
function htmlparser(ahtmlstring){ var html = document.implementation.createdocument("http://www.w3.org/1999/xhtml", "html", null), body = document.createelementns("http://www.w3.org/1999/xhtml", "body"); html.documentelement.appendchild(body); body.appendchild(components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml) .parsefragment(ahtmlstring, false, null, body)); return body; } it works by creating a content-level (this is safer than chrome-level) <div> in the current page, the...
... var frame = document.getelementbyid("sample-frame"); if (!frame) { // create frame frame = document.createelement("iframe"); // iframe (or browser on older firefox) frame.setattribute("id", "sample-frame"); frame.setattribute("name", "sample-frame"); frame.setattribute("type", "content"); frame.setattribute("collapsed", "true"); document.getelementbyid("main-window").appendchild(frame); // or // document.documentelement.appendchild(frame); // set restrictions as needed frame.webnavigation.

Interaction between privileged and non-privileged pages - Archive of obsolete content
to trigger the alert() in the listener and pass the data from the web page, write code such as this in the web page: var element = document.createelement("myextensiondataelement"); element.setattribute("attribute1", "foobar"); element.setattribute("attribute2", "hello world"); document.documentelement.appendchild(element); var evt = document.createevent("events"); evt.initevent("myextensionevent", true, false); element.dispatchevent(evt); this code creates an arbitrary element -- <myextensiondataelement/> -- and inserts it into the web page's d...
... in the web page: document.addeventlistener("myanswerevent",function(e) { extensionanswer(e); },false); var element; function callextension() { var element = document.createelement("myextensiondataelement"); element.setattribute("attribute1", "foobar"); element.setattribute("attribute2", "hello world"); document.documentelement.appendchild(element); var evt = document.createevent("events"); evt.initevent("myextensionevent", true, false); element.dispatchevent(evt); } function extensionanswer(evtanswer) { alert(element.getattribute("attribute3") + " " + ...

Drag and Drop Example - Archive of obsolete content
var boardobserver = { getsupportedflavours : function () { var flavours = new flavourset(); flavours.appendflavour("text/unicode"); return flavours; }, ondragover: function (event, flavour, session) {}, ondrop: function (event, dropdata, session) { if (dropdata.data != "") { var elem = document.createelement(dropdata.data); event.target.appendchild(elem); elem.setattribute("left", "" + event.pagex); elem.setattribute("top", "" + event.pagey); elem.setattribute("label", dropdata.data); } } } the getsupportedflavours function needs only to return a list of flavours that the stack can accept to be dropped on it.
...ferdata(); transferdata.data.adddataforflavour("text/unicode", txt); } }; var boardobserver = { getsupportedflavours : function () { var flavours = new flavourset(); flavours.appendflavour("text/unicode"); return flavours; }, ondragover: function (event, flavour, session) {}, ondrop: function (event, dropdata, session) { if (dropdata.data != "") { var elem = document.createelement(dropdata.data); event.target.appendchild(elem); elem.setattribute("left", "" + event.pagex); elem.setattribute("top", "" + event.pagey); elem.setattribute("label", dropdata.data); } } }; « previous original document information author(s): neil deakin original document: http://xulplanet.com/tutorials/mozsdk/dragex.php copyright information: copyright (c) nei...

Building accessible custom components in XUL - Archive of obsolete content
<code> const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; const x2_ns ="http://www.w3.org/tr/xhtml2" function start_edit(label) { var value = label.value; settimeout(function(){ var textbox = document.createelementns(xul_ns, "textbox"); label.parentnode.replacechild(textbox, label); textbox.value = value; textbox.origvalue = value; textbox.flex = 1; textbox.focus(); textbox.select(); textbox.addeventlistener("blur", editable_cell_blur, true); textbox.addeventlistener("keypress", editable_cell_keypress, true); }, 0); } function done_edit(textbox, keepvalue) { var value = textbox.value; v...
...ar label = document.createelementns(xul_ns, "label"); label.setattributens(x2_ns, "role", "wairole:gridcell"); textbox.parentnode.replacechild(label, textbox); if (keepvalue) { label.value = value; } else { label.value = textbox.origvalue; } label.flex = 1; label.addeventlistener("keypress", cell_keypress, true); return label; } function editable_cell_blur(e) { var textbox = e.target; settimeout(function() { done_edit(textbox, true); }, 0); } function editable_cell_keypress(e) { var textbox = e.target; switch (e.keycode) { case key_enter: settimeout(function() { var label = done_edit(textbox, true); label.focus(); }, 0); break; case key_escape: settimeout(function() { var label = done_edit(textbox, false); label.focus(); }...

MenuModification - Archive of obsolete content
<script> function addsubmenu() { var popup = document.getelementbyid("file-popup"); var newmenu = document.createelement("menu"); popup.appendchild(newmenu); newmenu.label = "new"; newmenu.appenditem("document", "doc"); newmenu.appenditem("image", "image"); } </script> <menu label="file" onpopupshowing="addsubmenu()"> <menupopup id="file-popup"/> </menu>.
... <script> function addsubmenu() { var popup = document.getelementbyid("file-popup"); if (popup.haschildnodes()) return; var newmenu = document.createelement("menu"); popup.appendchild(newmenu); newmenu.label = "new"; newmenu.appenditem("document", "doc"); newmenu.appenditem("image", "image"); } </script> the haschildnodes method may be used to check if a node has any children.

Things I've tried to do with XUL - Archive of obsolete content
multi-column listboxes when adding items to multi-column listboxes, you can't use the appenditem api: // auto-create and attach 1st cell var row = mylistbox.appenditem( label, value ); // create and attach 2nd cell var cell = document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ...
...instead, you must build up your own listitem full of listcells, and then add that listitem to the listbox, using generic dom calls: var row = document.createelement('listitem'); // create and attach 1st cell var cell = document.createelement('listcell'); cell.setattribute('label', label ); cell.setattribute('value', value ); row.appendchild( cell ); // create and attach 2nd cell cell = document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ...

XUL Questions and Answers - Archive of obsolete content
json string) from the server, parsing it on client, and building the menupopup using dom methods (such as document.createelementns).
... use the following snippet of code to add a new element under an existing element: var elem = document.getelementbyid(xul_element_id); var node = document.createelement(xul_element_name); node.setattribute(attribute, value); node.setattribute(attribute, value); elem.appendchild(node); how do i access xul elements in a sidebar from the context menu javascript?

Writing JavaScript for XHTML - Archive of obsolete content
this is xml proof, as long as you keep the namespace problem in focus (e.g., there is a document.createelementns method).
... for completeness here is the accept field, that firefox 2.0.0.9 sends with its requests: accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 further reading you will find several useful articles in the developer wiki: xml in mozilla dom xml introduction xml extras dom 2 methods you will need are: dom:document.createelementns dom:document.getelementsbytagnamens see also properly using css and javascript in xhtml documents ...

What are browser developer tools? - Learn web development
this will give you a window like the following: to see what happens, try entering the following snippets of code into the console one by one (and then pressing enter): alert('hello!'); document.queryselector('html').style.backgroundcolor = 'purple'; const mywordmark = document.createelement('img'); mywordmark.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); document.queryselector('h1').appendchild(mywordmark); now try entering the following incorrect versions of the code and see what you get.
... alert('hello!); document.cheeseselector('html').style.backgroundcolor = 'purple'; const mywordmark = document.createelement('img'); mybanana.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); document.queryselector('h1').appendchild(mywordmark); you'll start to see the kind of errors that the browser returns.

Making decisions in your code — conditionals - Learn web development
select = document.queryselector('select'); const list = document.queryselector('ul'); const h1 = document.queryselector('h1'); select.onchange = function() { const choice = select.value; // add conditional here createcalendar(days, choice); } function createcalendar(days, choice) { list.innerhtml = ''; h1.textcontent = choice; for (let i = 1; i <= days; i++) { const listitem = document.createelement('li'); listitem.textcontent = i; list.appendchild(listitem); } } createcalendar(31,'january'); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> .output * { box-sizing: border-box; } .output ul { padding-left: 0; } .output li { display: block; float: left; width: ...
...hoice = select.value;\n let days = 31;\n if(choice === \'february\') {\n days = 28;\n } else if(choice === \'april\' || choice === \'june\' || choice === \'september\'|| choice === \'november\') {\n days = 30;\n }\n\n createcalendar(days, choice);\n}\n\nfunction createcalendar(days, choice) {\n list.innerhtml = \'\';\n h1.textcontent = choice;\n for(let i = 1; i <= days; i++) {\n const listitem = document.createelement(\'li\');\n listitem.textcontent = i;\n list.appendchild(listitem);\n }\n }\n\ncreatecalendar(31,\'january\');'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { ...

Third-party APIs - Learn web development
function displayresults(json) { while (section.firstchild) { section.removechild(section.firstchild); } const articles = json.response.docs; if(articles.length === 10) { nav.style.display = 'block'; } else { nav.style.display = 'none'; } if(articles.length === 0) { const para = document.createelement('p'); para.textcontent = 'no results returned.' section.appendchild(para); } else { for(var i = 0; i < articles.length; i++) { const article = document.createelement('article'); const heading = document.createelement('h2'); const link = document.createelement('a'); const img = document.createelement('img'); const para1 = document.createelement('p'); ...
... const para2 = document.createelement('p'); const clearfix = document.createelement('div'); let current = articles[i]; console.log(current); link.href = current.web_url; link.textcontent = current.headline.main; para1.textcontent = current.snippet; para2.textcontent = 'keywords: '; for(let j = 0; j < current.keywords.length; j++) { const span = document.createelement('span'); span.textcontent += current.keywords[j].value + ' '; para2.appendchild(span); } if(current.multimedia.length > 0) { img.src = 'http://www.nytimes.com/' + current.multimedia[0].url; img.alt = current.headline.main; } clearfix.setattribute('class','clearfix'); article.appendchild(heading); heading.appendchild(lin...

A first splash into JavaScript - Learn web development
hi.textcontent = 'last guess was too low!' ; } else if(userguess > randomnumber) { loworhi.textcontent = 'last guess was too high!'; } } guesscount++; guessfield.value = ''; } guesssubmit.addeventlistener('click', checkguess); function setgameover() { guessfield.disabled = true; guesssubmit.disabled = true; resetbutton = document.createelement('button'); resetbutton.textcontent = 'start new game'; document.body.append(resetbutton); resetbutton.addeventlistener('click', resetgame); } function resetgame() { guesscount = 1; const resetparas = document.queryselectorall('.resultparas p'); for(let i = 0 ; i < resetparas.length ; i++) { resetparas[i].textcontent = ''; } resetbu...
...add this now, below the rest of your javascript: function setgameover() { guessfield.disabled = true; guesssubmit.disabled = true; resetbutton = document.createelement('button'); resetbutton.textcontent = 'start new game'; document.body.append(resetbutton); resetbutton.addeventlistener('click', resetgame); } the first two lines disable the form text input and button by setting their disabled properties to true.

Performance best practices for Firefox front-end engineers
create each child element (by calling document.createelement() for example), and add each one to the fragment by calling documentfragment.appendchild().
... this example has been cribbed from davidwalsh’s blog post: // create the fragment var frag = document.createdocumentfragment(); // create numerous list items, add to fragment for(var x = 0; x < 10; x++) { var li = document.createelement("li"); li.innerhtml = "list item " + x; frag.appendchild(li); } // mass-add the fragment nodes to the list listnode.appendchild(frag); the above is strictly cheaper than individually adding each node to the dom.

nsIMacDockSupport
this can be done like this: var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); console.log('docksupport:', docksupport); var win = services.wm.getmostrecentwindow('navigator:browser'); var macmenu = win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menupopup'); macmenu.setattribute('id', 'mymacmenu'); var macmenuitem = win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', f...
...var macmenuitem = services.appshell.hiddendomwindow.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplication(true); services.wm.getm...

Body.json() - Web APIs
const mylist = document.queryselector('ul'); const myrequest = new request('products.json'); fetch(myrequest) .then(response => response.json()) .then(data => { for (const product of data.products) { let listitem = document.createelement('li'); listitem.appendchild( document.createelement('strong') ).textcontent = product.name; listitem.append( ` can be found in ${ product.location }.
... cost: ` ); listitem.appendchild( document.createelement('strong') ).textcontent = `£${product.price}`; mylist.appendchild(listitem); } }) .catch(console.error); specifications specification status comment fetchthe definition of 'body.json()' in that specification.

CanvasRenderingContext2D.createPattern() - Web APIs
javascript // create a pattern, offscreen const patterncanvas = document.createelement('canvas'); const patterncontext = patterncanvas.getcontext('2d'); // give the pattern a width and height of 50 patterncanvas.width = 50; patterncanvas.height = 50; // give the pattern a background color and draw an arc patterncontext.fillstyle = '#fec'; patterncontext.fillrect(0, 0, patterncanvas.width, patterncanvas.height); patterncontext.arc(0, 0, 50, 0, .5 * math.pi); patterncontext.stroke(...
...); // create our primary canvas and fill it with the pattern const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const pattern = ctx.createpattern(patterncanvas, 'repeat'); ctx.fillstyle = pattern; ctx.fillrect(0, 0, canvas.width, canvas.height); // add our primary canvas to the webpage document.body.appendchild(canvas); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.createpattern' in that specification.

ChildNode.after() - Web APIs
examples inserting an element var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.after(span); console.log(parent.outerhtml); // "<div><p></p><span></span></div>" inserting text var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); child.after("text"); console.log(parent.outerhtml); // "<di...
...v><p></p>text</div>" inserting an element and text var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.after(span, "text"); console.log(parent.outerhtml); // "<div><p></p><span></span>text</div>" childnode.after() is unscopable the after() method is not scoped into the with statement.

ChildNode.before() - Web APIs
examples inserting an element var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.before(span); console.log(parent.outerhtml); // "<div><span></span><p></p></div>" inserting text var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); child.before("text"); console.log(parent.outerhtml); // "<...
...div>text<p></p></div>" inserting an element and text var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.before(span, "text"); console.log(parent.outerhtml); // "<div><span></span>text<p></p></div>" childnode.before() is unscopable the before() method is not scoped into the with statement.

ContentIndex.getAll() - Web APIs
async function createreadinglist() { // access our service worker registration const registration = await navigator.serviceworker.ready; // get our index entries const entries = await registration.index.getall(); // create a containing element const readinglistelem = document.createelement('div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createe...
...lement('ul'); for (const entry of entries) { const listitem = document.createelement('li'); const anchorelem = document.createelement('a'); anchorelem.innertext = entry.title; anchorelem.setattribute('href', entry.url); listelem.append(listitem); } readinglistelem.append(listelem); } } specifications specification status comment unknownthe definition of 'getall' in that specification.

ContentIndex - Web APIs
async function createreadinglist() { // access our service worker registration const registration = await navigator.serviceworker.ready; // get our index entries const entries = await registration.index.getall(); // create a containing element const readinglistelem = document.createelement('div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createe...
...lement('ul'); for (const entry of entries) { const listitem = document.createelement('li'); const anchorelem = document.createelement('a'); anchorelem.innertext = entry.title; anchorelem.setattribute('href', entry.url); listelem.append(listitem); } readinglistelem.append(listelem); } } unregistering indexed content below is an asynchronous function, that removes an item from the content index.

Content Index API - Web APIs
async function createreadinglist() { // access our service worker registration const registration = await navigator.serviceworker.ready; // get our index entries const entries = await registration.index.getall(); // create a containing element const readinglistelem = document.createelement('div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createe...
...lement('ul'); for (const entry of entries) { const listitem = document.createelement('li'); const anchorelem = document.createelement('a'); anchorelem.innertext = entry.title; anchorelem.setattribute('href', entry.url); listelem.append(listitem); } readinglistelem.append(listelem); } } unregistering indexed content below is an asynchronous function, that removes an item from the content index.

DeprecationReportBody - Web APIs
the report details are displayed via the displayreports() fuction, which takes the observer callback's reports parameter as its parameter: function displayreports(reports) { const outputelem = document.queryselector('.output'); const list = document.createelement('ul'); outputelem.appendchild(list); for(let i = 0; i < reports.length; i++) { let listitem = document.createelement('li'); let textnode = document.createtextnode('report ' + (i + 1) + ', type: ' + reports[i].type); listitem.appendchild(textnode); let innerlist = document.createelement('ul'); listitem.appendchild(innerlist); list.appendchild(listitem); for (let k...
...ey in reports[i].body) { let innerlistitem = document.createelement('li'); let keyvalue = reports[i].body[key]; innerlistitem.textcontent = key + ': ' + keyvalue; innerlist.appendchild(innerlistitem); } } } the reports parameter contains an array of all the reports in the observer's report queue.

Document - Web APIs
document.createelement() creates a new element with the given tag name.
... document.createelementns() creates a new element with the given tag name and namespace uri.

Examples of web and XML development using the DOM - Web APIs
bold; } td { padding: 2px 10px 2px 10px; } .odd { background-color: #efdfef; } .even { background-color: #ffffff; } </style> <script> function showeventproperties(e) { function addcell(row, text) { var cell = row.insertcell(-1); cell.appendchild(document.createtextnode(text)); } var e = e || window.event; document.getelementbyid('eventtype').innerhtml = e.type; var table = document.createelement('table'); var thead = table.createthead(); var row = thead.insertrow(-1); var lablelist = ['#', 'property', 'value']; var len = lablelist.length; for (var i=0; i<len; i++) { addcell(row, lablelist[i]); } var tbody = document.createelement('tbody'); table.appendchild(tbody); for (var p in e) { row = tbody.insertrow(-1); row.classname = (row.rowindex % 2)?
... if dom core methods document.createelement and node.appendchild are used to create rows and cells, ie requires that they are appended to a tbody element, whereas other browsers will allow appending to a table element (the rows will be added to the last tbody element).

Element.outerHTML - Web APIs
for example: var div = document.createelement("div"); div.outerhtml = "<div class=\"test\">test</div>"; console.log(div.outerhtml); // output: "<div></div>" also, while the element will be replaced in the document, the variable whose outerhtml property was set will still hold a reference to the original element: var p = document.getelementsbytagname("p")[0]; console.log(p.nodename); // shows: "p" p.outerhtml = "<div>this div replaced a par...
...agraph.</div>"; console.log(p.nodename); // still "p"; the returned value will contain html escaped attributes: var anc = document.createelement("a"); anc.href = "https://developer.mozilla.org?a=b&c=d"; console.log(anc.outerhtml); // output: "<a href='https://developer.mozilla.org?a=b&amp;c=d'></a>" specification specification status comment dom parsing and serializationthe definition of 'element.outerhtml' in that specification.

Using the Gamepad API - Web APIs
var haveevents = 'ongamepadconnected' in window; var controllers = {}; function connecthandler(e) { addgamepad(e.gamepad); } function addgamepad(gamepad) { controllers[gamepad.index] = gamepad; var d = document.createelement("div"); d.setattribute("id", "controller" + gamepad.index); var t = document.createelement("h1"); t.appendchild(document.createtextnode("gamepad: " + gamepad.id)); d.appendchild(t); var b = document.createelement("div"); b.classname = "buttons"; for (var i = 0; i < gamepad.buttons.length; i++) { var e = document.createelement("span"); e.classname = "button"; //e.id = "...
...b" + i; e.innerhtml = i; b.appendchild(e); } d.appendchild(b); var a = document.createelement("div"); a.classname = "axes"; for (var i = 0; i < gamepad.axes.length; i++) { var p = document.createelement("progress"); p.classname = "axis"; //p.id = "a" + i; p.setattribute("max", "2"); p.setattribute("value", "1"); p.innerhtml = i; a.appendchild(p); } d.appendchild(a); // see https://github.com/luser/gamepadtest/blob/master/index.html var start = document.getelementbyid("start"); if (start) { start.style.display = "none"; } document.body.appendchild(d); requestanimationframe(updatestatus); } function disconnecthandler(e) { removegamepad(e.gamepad); } function removegamepad(gamepad) { var d = document.getelementbyid("controller" + gamepad...

HTMLCanvasElement.toBlob() - Web APIs
var canvas = document.getelementbyid('canvas'); canvas.toblob(function(blob) { var newimg = document.createelement('img'), url = url.createobjecturl(blob); newimg.onload = function() { // no longer need to read the blob so it's revoked url.revokeobjecturl(url); }; newimg.src = url; document.body.appendchild(newimg); }); note that here we're creating a png image; if you add a second parameter to the toblob() call, you can specify the image type.
... var canvas = document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); function blobcallback(iconname) { return function(b) { var a = document.createelement('a'); a.textcontent = 'download'; document.body.appendchild(a); a.style.display = 'block'; a.download = iconname + '.ico'; a.href = window.url.createobjecturl(b); } } canvas.toblob(blobcallback('passthisstring'), 'image/vnd.microsoft.icon', '-moz-parse-options:format=bmp;bpp=32'); save toblob to disk with os.file (chrome/add-on context only) this technique ...

HTMLImageElement - Web APIs
when called without parameters, new image() is equivalent to calling document.createelement("img").
... example var img1 = new image(); // image constructor img1.src = 'image1.png'; img1.alt = 'alt'; document.body.appendchild(img1); var img2 = document.createelement('img'); // use dom htmlimageelement img2.src = 'image2.jpg'; img2.alt = 'alt text'; document.body.appendchild(img2); // using first image in the document alert(document.images[0].src); specifications specification status comment css object model (cssom) view modulethe definition of 'extensions to htmlimageelement' in that specification.

HTMLScriptElement - Web APIs
function loaderror(oerror) { throw new urierror("the script " + oerror.target.src + " didn't load correctly."); } function prefixscript(url, onloadfunction) { var newscript = document.createelement("script"); newscript.onerror = loaderror; if (onloadfunction) { newscript.onload = onloadfunction; } document.currentscript.parentnode.insertbefore(newscript, document.currentscript); newscript.src = url; } this next function, instead of prepending the new scripts immediately before the document.currentscript element, appends them as children of the <head> tag.
... function loaderror(oerror) { throw new urierror("the script " + oerror.target.src + " didn't load correctly."); } function affixscripttohead(url, onloadfunction) { var newscript = document.createelement("script"); newscript.onerror = loaderror; if (onloadfunction) { newscript.onload = onloadfunction; } document.head.appendchild(newscript); newscript.src = url; } sample usage: affixscripttohead("myscript1.js"); affixscripttohead("myscript2.js", function () { alert("the script \"myscript2.js\" has been correctly loaded."); }); specifications specification status comment html living standardthe definition of 'htmlscriptelement' in that specification.

Drag Operations - Web APIs
this technique is useful when drawing custom drag images using the canvas element, as in the following example: function dragwithcustomimage(event) { const canvas = document.createelement("canvas"); canvas.width = canvas.height = 50; const ctx = canvas.getcontext("2d"); ctx.linewidth = 4; ctx.moveto(0, 0); ctx.lineto(50, 50); ctx.moveto(0, 50); ctx.lineto(50, 0); ctx.stroke(); const dt = event.datatransfer; dt.setdata('text/plain', 'data to drag'); dt.setdragimage(canvas, 25, 25); } in this example, we make one canvas the drag image.
... function dodrop(event) { const lines = event.datatransfer.getdata("text/uri-list").split("\n"); lines.filter(line => !line.startswith("#")) .foreach(line => { const link = document.createelement("a"); link.href = line; link.textcontent = line; event.target.appendchild(link); }) event.preventdefault(); } this example inserts a link from the dragged data.

MediaRecorder: dataavailable event - Web APIs
var chunks = []; mediarecorder.addeventlistener('stop', (event) => { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); }); mediarecorder.addeventlistener('dataavailable', (event) => { chunks.push(event.data); }); ...
... var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ...

MediaStream Recording API - Web APIs
} } function download() { var blob = new blob(recordedchunks, { type: "video/webm" }); var url = url.createobjecturl(blob); var a = document.createelement("a"); document.body.appendchild(a); a.style = "display: none"; a.href = url; a.download = "test.webm"; a.click(); window.url.revokeobjecturl(url); } // demo: to download after 9sec settimeout(event => { console.log("stopping"); mediarecorder.stop(); }, 9000); examining and controlling the recorder status you can also use the properties of the mediarecorder object to determine ...
... navigator.mediadevices.enumeratedevices() .then(function(devices) { devices.foreach(function(device) { let menu = document.getelementbyid("inputdevices"); if (device.kind == "audioinput") { let item = document.createelement("option"); item.innerhtml = device.label; item.value = device.deviceid; menu.appendchild(item); } }); }); code similar to this can be used to let the user restrict the set of devices they wish to use.

Using the Media Capabilities API - Web APIs
{ contenttype: document.getelementbyid('codec').value, width: size[0], height: size[1], bitrate: document.getelementbyid('bitrate').value, framerate: document.getelementbyid('framerate').value, } } }, testit: function () { let content = ''; navigator.mediacapabilities.decodinginfo(mc.videoconfiguration).then(result => { var li = document.createelement('li'), mcv = mc.videoconfiguration.video; content = 'a ' + mcv.width + 'x' + mcv.height + ', ' + mcv.contenttype + ' at ' + mcv.framerate + 'fps and ' + mcv.bitrate + ' bps video ' + (result.supported ?
...' is ' : ' is not ') + 'power efficient.'; var ul = document.getelementbyid("results") li.innerhtml = content; ul.appendchild(li); }).catch((error) => { var li = document.createelement('li'), ul = document.getelementbyid("results"); li.innertext = 'codec ' + mc.videoconfiguration.video.contenttype + ' threw an error: ' + error; ul.appendchild(li); }); } } document.getelementbyid('tryit').addeventlistener('click', mc.tryit); live result ...

Node.appendChild() - Web APIs
notes chaining may not work as expected, due to appendchild() returning the child element: let ablock = document.createelement('block').appendchild( document.createelement('b') ); sets ablock to <b></b> only, which is probably not what you want.
... example // create a new paragraph element, and append it to the end of the document body let p = document.createelement("p"); document.body.appendchild(p); specifications specification status comment domthe definition of 'node.appendchild()' in that specification.

ParentNode.append() - Web APIs
examples appending an element let parent = document.createelement("div") let p = document.createelement("p") parent.append(p) console.log(parent.childnodes) // nodelist [ <p> ] appending text let parent = document.createelement("div") parent.append("some text") console.log(parent.textcontent) // "some text" appending an element and text let parent = document.createelement("div") let p = document.createelement("p") parent.append("some text", p) console.l...
... let parent = document.createelement("div") with(parent) { append("foo") } // referenceerror: append is not defined polyfill you can polyfill the append() method in internet explorer 9 and higher with the following code: // source: https://github.com/jserz/js_piece/blob/master/dom/parentnode/append()/append().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('append')) { return; } object.defineproperty(item, 'append', { configurable: true, enumerable: true, writable: true, value: function append() { var argarr = array.prototype.sli...

Path2D.addPath() - Web APIs
we then create a matrix using document.createelementns() and createsvgmatrix().
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create first path and add a rectangle let p1 = new path2d(); p1.rect(0, 0, 100, 150); // create second path and add a rectangle let p2 = new path2d(); p2.rect(0, 0, 100, 75); // create transformation matrix that moves 200 points to the right let m = document.createelementns('http://www.w3.org/2000/svg', 'svg').createsvgmatrix(); m.a = 1; m.b = 0; m.c = 0; m.d = 1; m.e = 200; m.f = 0; // add second path to the first path p1.addpath(p2, m); // draw the first path ctx.fill(p1); result specifications specification status comment html living standardthe definition of 'path2d.addpath()' in that specification.

RTCDataChannel: message event - Web APIs
dc.addeventlistener("message", ev => { let newparagraph = document.createelement("p"); let textnode = document.createtextnode(event.data); newparagraph.appendchild(textnode); document.body.appendchild(newparagraph); }, false); lines 2-4 create the new paragraph element and add the message data to it as a new text node.
... you can also use an rtcdatachannel object's onmessage event handler property to set the event handler: dc.onmessage = ev => { let newparagraph = document.createelement("p"); let textnode = document.createtextnode(event.data); newparagraph.appendchild(textnode); document.body.appendchild(newparagraph); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'the <code>message</code> event' in that specification.

Range.setStart() - Web APIs
main st.<br> dodge city, ks<br> 67801<br> usa</p> <hr> <p>nodes in the original address:</p> <ol id="log"></ol> javascript const address = document.getelementbyid('address'); const log = document.getelementbyid('log'); // log info address.childnodes.foreach(node => { const li = document.createelement('li'); li.textcontent = `${node.nodename}, ${node.nodevalue}`; log.appendchild(li); }); // highlight the street and city const startoffset = 2; // start at third node: 101 e.
...const endoffset = 5; // end at fifth node: dodge city, ks const range = document.createrange(); range.setstart(address, startoffset); range.setend(address, endoffset); const mark = document.createelement('mark'); range.surroundcontents(mark); result get characters from a text node this example uses the range.setstart() and range.setend() methods to define the contents of a range.

Report - Web APIs
the report details are displayed via the displayreports() fuction, which takes the observer callback's reports parameter as its parameter: function displayreports(reports) { const outputelem = document.queryselector('.output'); const list = document.createelement('ul'); outputelem.appendchild(list); for(let i = 0; i < reports.length; i++) { let listitem = document.createelement('li'); let textnode = document.createtextnode('report ' + (i + 1) + ', type: ' + reports[i].type); listitem.appendchild(textnode); let innerlist = document.createelement('ul'); listitem.appendchild(innerlist); list.appendchild(listitem); for (let k...
...ey in reports[i].body) { let innerlistitem = document.createelement('li'); let keyvalue = reports[i].body[key]; innerlistitem.textcontent = key + ': ' + keyvalue; innerlist.appendchild(innerlistitem); } } } the reports parameter contains an array of all the reports in the observer's report queue.

Using server-sent events - Web APIs
for example, assuming the client script is on example.com: const evtsource = new eventsource("//api.example.com/ssedemo.php", { withcredentials: true } ); once you've instantiated your event source, you can begin listening for messages from the server by attaching a handler for the message event: evtsource.onmessage = function(event) { const newelement = document.createelement("li"); const eventlist = document.getelementbyid("list"); newelement.innerhtml = "message: " + event.data; eventlist.appendchild(newelement); } this code listens for incoming messages (that is, notices from the server that do not have an event field on them) and appends the message text to a list in the document's html.
... you can also listen for events with addeventlistener(): evtsource.addeventlistener("ping", function(event) { const newelement = document.createelement("li"); const time = json.parse(event.data).time; newelement.innerhtml = "ping at " + time; eventlist.appendchild(newelement); }); this code is similar, except that it will be called automatically whenever the server sends a message with the event field set to "ping"; it then parses the json in the data field and outputs that information.

SpeechSynthesis: voiceschanged event - Web APIs
you can use the voiceschanged event in an addeventlistener method: var synth = window.speechsynthesis; synth.addeventlistener('voiceschanged', function() { var voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } }); or use the onvoiceschanged event handler property: synth.onvoiceschanged = function() { var voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { ...
... var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } specifications specification status comment web speech apithe definition of 'speech synthesis events' in that specification.

Using readable streams - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); readstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generat...
... if (done) { console.log("stream complete"); para.textcontent = result; return; } charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'read ' + charsreceived + ' characters so far.

Example and tutorial: Simple synth keyboard - Web APIs
notefreq.foreach(function(keys, idx) { let keylist = object.entries(keys); let octaveelem = document.createelement("div"); octaveelem.classname = "octave"; keylist.foreach(function(key) { if (key[0].length == 1) { octaveelem.appendchild(createkey(key[0], idx, key[1])); } }); keyboard.appendchild(octaveelem); }); document.queryselector("div[data-note='b'][data-octave='5']").scrollintoview(false); sineterms = new float32array([0, 0, 1, 0, 1]); cosineterms = new fl...
... function createkey(note, octave, freq) { let keyelement = document.createelement("div"); let labelelement = document.createelement("div"); keyelement.classname = "key"; keyelement.dataset["octave"] = octave; keyelement.dataset["note"] = note; keyelement.dataset["frequency"] = freq; labelelement.innerhtml = note + "_{" + octave + "}"; keyelement.appendchild(labelelement); keyelement.addeventlistener("mousedown", notepressed, false); keyelement.adde...

Detecting CSS animation support - CSS: Cascading Style Sheets
testing for css animation support this code will check to see if css animation support is available: var animation = false, animationstring = 'animation', keyframeprefix = '', domprefixes = 'webkit moz o ms khtml'.split(' '), pfx = '', elem = document.createelement('div'); if( elem.style.animationname !== undefined ) { animation = true; } if( animation === false ) { for( var i = 0; i < domprefixes.length; i++ ) { if( elem.style[ domprefixes[i] + 'animationname' ] !== undefined ) { pfx = domprefixes[ i ]; animationstring = pfx + 'animation'; keyframeprefix = '-' + pfx.tolowercase() + '-'; animation = true; break; } ...
...finite'; var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+ 'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+ 'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+ '}'; if( document.stylesheets && document.stylesheets.length ) { document.stylesheets[0].insertrule( keyframes, 0 ); } else { var s = document.createelement( 'style' ); s.innerhtml = keyframes; document.getelementsbytagname( 'head' )[ 0 ].appendchild( s ); } } this code looks at the value of animation; if it's false, we know we need to use our javascript fallback code to perform our animation.

Adding captions and subtitles to HTML5 video - Developer guides
all we need to do is to go through the video's texttracks, reading their properties and building the menu up from there: var subtitlesmenu; if (video.texttracks) { var df = document.createdocumentfragment(); var subtitlesmenu = df.appendchild(document.createelement('ul')); subtitlesmenu.classname = 'subtitles-menu'; subtitlesmenu.appendchild(createmenuitem('subtitles-off', '', 'off')); for (var i = 0; i < video.texttracks.length; i++) { subtitlesmenu.appendchild(createmenuitem('subtitles-' + video.texttracks[i].language, video.texttracks[i].language, video.texttracks[i].label)); } videocontainer.appendchild(subtitlesmenu); } this code ...
... the creation of each list item and button is done by the createmenuitem() function, which is defined as follows: var subtitlemenubuttons = []; var createmenuitem = function(id, lang, label) { var listitem = document.createelement('li'); var button = listitem.appendchild(document.createelement('button')); button.setattribute('id', id); button.classname = 'subtitles-button'; if (lang.length > 0) button.setattribute('lang', lang); button.value = label; button.setattribute('data-state', 'inactive'); button.appendchild(document.createtextnode(label)); button.addeventlistener('click', function(e) { ...

Using HTML sections and outlines - Developer guides
you can add a specific script to allow this, as seen below: <!--[if lt ie 9]> <script> document.createelement("article"); document.createelement("aside"); document.createelement("footer"); document.createelement("header"); document.createelement("nav"); document.createelement("section"); document.createelement("time"); </script> <![endif]--> as a last precaution, you could also add an explicit <noscript> element inside the <head> element to warn any users that have javascript ...
...n web browsers.</p> <p><a href="https://goo.gl/koeeaj">how to enable javascript?</a></p> </noscript> this leads to the following code to allow the support of the html5 sections and headings elements in non-html5 browsers, even for internet explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting: <!--[if lt ie 9]> <script> document.createelement("article"); document.createelement("aside"); document.createelement("footer"); document.createelement("header"); document.createelement("nav"); document.createelement("section"); document.createelement("time"); </script> <![endif]--> <noscript> <p><strong>this web page requires javascript to be enabled.</strong></p> <p>javascript is an object-oriented computer progra...

<input type="file"> - HTML: Hypertext Markup Language
function updateimagedisplay() { while(preview.firstchild) { preview.removechild(preview.firstchild); } const curfiles = input.files; if(curfiles.length === 0) { const para = document.createelement('p'); para.textcontent = 'no files currently selected for upload'; preview.appendchild(para); } else { const list = document.createelement('ol'); preview.appendchild(list); for(const file of curfiles) { const listitem = document.createelement('li'); const para = document.createelement('p'); if(validfiletype(file)) { para.textcontent = `file name ${...
...file.name}, file size ${returnfilesize(file.size)}.`; const image = document.createelement('img'); image.src = url.createobjecturl(file); listitem.appendchild(image); listitem.appendchild(para); } else { para.textcontent = `file name ${file.name}: not a valid file type.

<input type="month"> - HTML: Hypertext Markup Language
r = document.queryselector('.fallbackdatepicker'); var fallbacklabel = document.queryselector('.fallbacklabel'); var yearselect = document.queryselector('#year'); var monthselect = document.queryselector('#month'); // hide fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test whether a new date input falls back to a text input or not var test = document.createelement('input'); try { test.type = 'month'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { // hide the native picker and show the fallback nativepicker.style.display = 'none'; fallbackpicker.style.display = 'block'; fallbacklabel.style.display = 'block'; // populate the years dynamically // (the months are al...
...ways the same, therefore hardcoded) populateyears(); } function populateyears() { // get the current year as a number var date = new date(); var year = date.getfullyear(); // make this year, and the 100 years before it available in the year <select> for(var i = 0; i <= 100; i++) { var option = document.createelement('option'); option.textcontent = year-i; yearselect.appendchild(option); } } note: remember that some years have 53 weeks in them (see weeks per year)!

<input type="week"> - HTML: Hypertext Markup Language
cument.queryselector('.fallbackweekpicker'); var fallbacklabel = document.queryselector('.fallbacklabel'); var yearselect = document.queryselector('#year'); var weekselect = document.queryselector('#fallbackweek'); // hide fallback initially fallbackpicker.style.display = 'none'; fallbacklabel.style.display = 'none'; // test whether a new date input falls back to a text input or not var test = document.createelement('input'); try { test.type = 'week'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { // hide the native picker and show the fallback nativepicker.style.display = 'none'; fallbackpicker.style.display = 'block'; fallbacklabel.style.display = 'block'; // populate the weeks dynamically populateweeks(); } fu...
...nction populateweeks() { // populate the week select with 52 weeks for(var i = 1; i <= 52; i++) { var option = document.createelement('option'); option.textcontent = (i < 10) ?

Preloading content with rel="preload" - HTML: Hypertext Markup Language
for example, here we create a htmllinkelement instance, then attach it to the dom: var preloadlink = document.createelement("link"); preloadlink.href = "myscript.js"; preloadlink.rel = "preload"; preloadlink.as = "script"; document.head.appendchild(preloadlink); this means that the browser will preload the myscript.js file, but not actually use it yet.
... to use it, you could do this: var preloadedscript = document.createelement("script"); preloadedscript.src = "myscript.js"; document.body.appendchild(preloadedscript); this is useful when you want to preload a script, but then defer execution until exactly when you need it.

Namespaces crash course - SVG: Scalable Vector Graphics
so, to create an svg rect element using document.createelementns(), you must write: document.createelementns('http://www.w3.org/2000/svg', 'rect'); but to retrieve the value of the xparameter on an svg rect element, you must write: rect.getattributens(null, 'x'); note that this isn't the case for parameters with a namespace prefix (parameters that don't belong to the same xml dialect as the element).
...for example: elt.setattributens('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg'); as a final example, here's a demonstration of how you should dynamically create an <image> element using script: var svg_ns = 'http://www.w3.org/2000/svg'; var xlink_ns = 'http://www.w3.org/1999/xlink'; var image = document.createelementns(svg_ns, 'image'); image.setattributens(null, 'width', '100'); image.setattributens(null, 'height', '100'); image.setattributens(xlink_ns, 'xlink:href', 'flower.png'); conclusion make sure you always declare the namespaces you use in your xml files.

Compiling an Existing C Module to WebAssembly - WebAssembly
luckily, the canvas api has canvasrenderingcontext2d.getimagedata — that gives you an uint8clampedarray containing the image data in rgba: async function loadimage(src) { // load image const imgblob = await fetch(src).then(resp => resp.blob()); const img = await createimagebitmap(imgblob); // make canvas same size as image const canvas = document.createelement('canvas'); canvas.width = img.width; canvas.height = img.height; // draw image onto canvas const ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); return ctx.getimagedata(0, 0, img.width, img.height); } now it's "only" a matter of copying the data from javascript into wasm.
...to prove that it worked, turn your result buffer into a blob and use it on an <img> element: const blob = new blob([result], {type: 'image/webp'}); const bloburl = url.createobjecturl(blob); const img = document.createelement('img'); img.src = bloburl; document.body.appendchild(img) behold, the glory of a new webp image.

Rosetta - Archive of obsolete content
"); if (!odicts.hasownproperty(smimetype)) { alert("rosetta.translatescript() \u2013 unknown mime-type \"" + smimetype + "\": script ignored."); return; } var ocompiled = document.createelement("script"); oscript.parentnode.insertbefore(obaton, oscript); oscript.parentnode.removechild(oscript); for (var aattrs = oscript.attributes, nattr = 0; nattr < aattrs.length; nattr++) { ocompiled.setattribute(aattrs[nattr].name, aattrs[nattr].value); } ocompiled.type = "text\/ecmascript"; if (oxhr200) { ocompiled.src = "data:text\/javascript," + encodeuricomponent(o...

SVG General - Archive of obsolete content
here is the script: var svgns = "http://www.w3.org/2000/svg"; var xlinkns = "http://www.w3.org/1999/xlink"; var attr_map = { "classname": "class", "svghref": "href" } var ns_map = { "svghref": xlinkns }; function makesvg(tag, attributes) { var elem = document.createelementns(svgns, tag); for (var attribute in attributes) { var name = (attribute in attr_map ?

StringView - Archive of obsolete content
examples function mycallback (charcode, characteroffset, rawoffset /*, rawdataarray */) { this.appendchild(document.createtextnode("char #" + characteroffset + ", raw index: " + rawoffset + ", character: " + string.fromcharcode(charcode))); this.appendchild(document.createelement("br")); } (new stringview("\u4367\ud889\ude54\u4343\u5431")).foreachchar(mycallback, document.body); note: stringview.foreachchar() executes a complete cycle through all characters in the stringview between characteroffset and characteroffset + characterslength.

Windows - Archive of obsolete content
var hr = document.createelementns("http://www.w3.org/1999/xhtml", "html:hr"); document.getelementbyid("id1").appendchild(hr); ...

How to convert an overlay extension to restartless - Archive of obsolete content
docs: document.getelementbyid(), document.createelement(), element reference, node reference (dom elements are also nodes).

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
popup.removechild(node); } var fileenum = this._dir.directoryentries; while (fileenum.hasmoreelements()) { var file = fileenum.getnext().queryinterface(components.interfaces.nsifile); var re = new regexp("^session_(\\d+)\.js$"); if (!re.test(file.leafname)) continue; var datetime = new date(parseint(regexp.$1, 10)).tolocalestring(); var menuitem = document.createelement("menuitem"); menuitem.setattribute("label", datetime); menuitem.setattribute("filename", file.leafname); menupopup.insertbefore(menuitem, menupopup.firstchild.nextsibling.nextsibling); } }, operations check this completes the functional implementation.

Chapter 2: Technologies used in developing extensions - Archive of obsolete content
listing 4: an example manipulation using the dom var bar = document.getelementbyid('toolbar'); bar.removechild(bar.childnodes[1]); bar.appendchild(document.createelement('button')); bar.lastchild.setattribute('label', 'hello!'); « previousnext » ...

Custom XUL Elements with XBL - Archive of obsolete content
let person = document.createelement("xshelloperson"); // ...

Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
document.body.appendchild(parsehtml(document, xhr.responsetext, true, xhr.channel.uri)); see also displaying web content in an extension without security issues how to create a dom tree node.textcontent node.appendchild() element.setattribute() document.createelement() document.createtextnode() original document information author(s): kris maglione last updated date: 2011-08-08 ...

Jetpack Snippets - Archive of obsolete content
using firebug lite in a slidebar jetpack.future.import("slidebar");jetpack.slidebar.append({ html: <html><head></head><body> <p>some slidbar you want to debug</p> <a href="javascript:console.log('hello!')">test</a> <script><![cdata[ //firebug lite bookmarklet code: var firebug=document.createelement('script'); firebug.setattribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'); document.body.appendchild(firebug); (function(){if(window.firebug.version){firebug.init();}else{settimeout(arguments.callee);}})();void(firebug); ]]></script> </body></html>, width: 800, //wide enough to use firebug on...

Filtering - Archive of obsolete content
function applyfilter(country) { var cond = document.getelementbyid("cond"); var triple = document.getelementbyid("filtertriple"); if (country) { if (!triple) { triple = document.createelement("triple"); triple.id = "filtertriple"; triple.setattribute("subject", "?photo"); triple.setattribute("predicate", "http://www.xulplanet.com/rdf/country"); } triple.setattribute("object", country); cond.appendchild(triple); } else if (triple) { cond.removechild(triple); } document.getelementbyid("photoslist").builder.rebuild(); } the 'country' argument t...

Adding Methods to XBL-defined Elements - Archive of obsolete content
for example, the following code will probably fail: var element = document.createelement("my_element"); element.getmaximum() // this will fail by the way, it is safe to call methods from the constructor, other methods on the object and event handlers.

Modifying a XUL Interface - Archive of obsolete content
for example, the following will add a button to a xul window: example 1 : source view <script> function addbutton(){ var abox = document.getelementbyid("abox"); var button = document.createelement("button"); button.setattribute("label","a new button"); abox.appendchild(button); } </script> <box id="abox" width="200"> <button label="add" oncommand="addbutton();"/> </box> this example has two parts a box container element in xul.

listbox - Archive of obsolete content
> <listcol/> <listcol flex="1"/> </listcols> </listbox> var thelist = document.getelementbyid('thelist'); gems = [ {gem: "ruby", price: "$3,500 - $4,600"}, {gem: "emerald", price: "$700 - 4,250"}, {gem: "blue sapphire", price: "$3,400 - $4,500"}, {gem: "diamond", price: "$5,600 - $16,000"} ]; for (var i = 0; i < gems.length; i++) { var row = document.createelement('listitem'); var cell = document.createelement('listcell'); cell.setattribute('label', gems[i].gem); row.appendchild(cell); cell = document.createelement('listcell'); cell.setattribute('label', gems[i].price ); row.appendchild(cell); thelist.appendchild(row); } attributes disabled type: boolean indicates whether the element is disabled or not.

listcell - Archive of obsolete content
tips if you need to right-align a cell's contents, you can do so like this: cell = document.createelement("listcell"); cell.setattribute("label", "this is the cell's label"); cell.setattribute("style", "text-align:right"); related elements listbox, listcol, listcols, listhead, listheader, listitem ...

How to enable locale switching in a XULRunner application - Archive of obsolete content
aleswitchdemo"); // render locale menulist by iterating through the query result from getlocalesforpackage() const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var localelistbox = document.getelementbyid("locale-listbox"); var selecteditem = null; while(availablelocales.hasmore()) { var locale = availablelocales.getnext(); var listitem = document.createelementns(xul_ns, "listitem"); listitem.setattribute("value", locale); listitem.setattribute("label", locale); if (locale == selectedlocale) { // is this the current locale?

Extentsions FAQ - Archive of obsolete content
var newnode = document.createelement(" ...

Displaying notifications (deprecated) - Archive of obsolete content
for example, let's simply append a little html to our document when these events fire: notification.onclick = function() { var e = document.createelement("p"); e.innerhtml = "<strong>the notification was clicked.</strong>"; document.body.appendchild(e); }; notification.onclose = function() { var e = document.createelement("p"); e.innerhtml = "<strong>the notification was closed.</strong>"; document.body.appendchild(e); }; displaying the notification once the notification is configured the way you want it to be, call its show() method t...

Common causes of memory leaks in extensions - Extensions
for example, the following code snippets — part of a bootstrap.js — will leak: function leakref() {} function modifydocument(document) { var a = document.createelement("a"); document.body.appendchild(a); // the new dom node holding a reference to leakref will prevent // that function object from being garbage collected and hence // will leak the whole bootstrap compartment.

Building up a basic demo with A-Frame - Game development
add a new <script> element at the end of the <body> element, just after the <a-scene> element, then add the following javascript code inside it: var scene = document.queryselector('a-scene'); var cylinder = document.createelement('a-cylinder'); cylinder.setattribute('color', '#ff9500'); cylinder.setattribute('height', '2'); cylinder.setattribute('radius', '0.75'); cylinder.setattribute('position', '3 1 0'); scene.appendchild(cylinder); we're getting a reference to the scene handler first, then we create the cylinder element as an a-frame entity.

Audio for Web games - Game development
var myaudio = document.createelement("audio"); myaudio.src = "mysprite.mp3"; myaudio.play(); myaudio.pause(); you'll need to sample the current time to know when to stop.

Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms
don't add it via document.write() or document.createelement.

CSS and JavaScript accessibility best practices - Learn web development
function createlink(testitem) { const listitem = document.createelement('li'); const anchor = document.createelement('a'); anchor.textcontent = testitem.input.name + ' field is empty: fill in your ' + testitem.input.name + '.'; anchor.href = '#' + testitem.input.name; anchor.onclick = function() { testitem.input.focus(); }; listitem.appendchild(anchor); errorlist.appendchild(listitem); } each link serves a dual purpose — it tells you what the er...

Fundamental text and font styling - Learn web development
ntrols"> <input id="reset" type="button" value="reset" style="margin: 10px 10px 0 0;"> </div> </div> const htmlinput = document.queryselector(".html-input"); const cssinput = document.queryselector(".css-input"); const reset = document.getelementbyid("reset"); let htmlcode = htmlinput.value; let csscode = cssinput.value; const output = document.queryselector(".output"); const styleelem = document.createelement('style'); const headelem = document.queryselector('head'); headelem.appendchild(styleelem); function drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = csscode; drawoutput(); }); htmlinput.addeventlistener("input", drawoutput); cssinput.addeventlistener(...

Styling links - Learn web development
="show solution" style="margin: 10px 0 0 10px;"> </div> </div> var htmlinput = document.queryselector(".html-input"); var cssinput = document.queryselector(".css-input"); var reset = document.getelementbyid("reset"); var htmlcode = htmlinput.value; var csscode = cssinput.value; var output = document.queryselector(".output"); var solution = document.getelementbyid("solution"); var styleelem = document.createelement('style'); var headelem = document.queryselector('head'); headelem.appendchild(styleelem); function drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = csscode; drawoutput(); }); solution.addeventlistener("click", function() { htmlinput.value = htmlcode;...

Styling lists - Learn web development
="show solution" style="margin: 10px 0 0 10px;"> </div> </div> var htmlinput = document.queryselector(".html-input"); var cssinput = document.queryselector(".css-input"); var reset = document.getelementbyid("reset"); var htmlcode = htmlinput.value; var csscode = cssinput.value; var output = document.queryselector(".output"); var solution = document.getelementbyid("solution"); var styleelem = document.createelement('style'); var headelem = document.queryselector('head'); headelem.appendchild(styleelem); function drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = csscode; drawoutput(); }); solution.addeventlistener("click", function() { htmlinput.value = htmlcode;...

General asynchronous programming concepts - Learn web development
o a button so that when clicked, it runs a time-consuming operation (calculates 10 million dates then logs the final one to the console) and then adds a paragraph to the dom: const btn = document.queryselector('button'); btn.addeventlistener('click', () => { let mydate; for(let i = 0; i < 10000000; i++) { let date = new date(); mydate = date } console.log(mydate); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); when running the example, open your javascript console then click the button — you'll notice that the paragraph does not appear until after the dates have finished being calculated and the console message has been logged.

Introduction to web APIs - Learn web development
the document object model (dom) api also has a simple entry point — its features tend to be found hanging off the document object, or an instance of an html element that you want to affect in some way, for example: const em = document.createelement('em'); // create a new em element const para = document.queryselector('p'); // reference an existing p element em.textcontent = 'hello there!'; // give em some text content para.appendchild(em); // embed em inside para the canvas api also relies on getting a context object to use to manipulate things, although in this case, it's a graphical context rather than an audio context.

Manipulating documents - Learn web development
going back to the current example, let's start by grabbing a reference to our <section> element — add the following code at the bottom of your existing script (do the same with the other lines too): const sect = document.queryselector('section'); now let's create a new paragraph using document.createelement() and give it some text content in the same way as before: const para = document.createelement('p'); para.textcontent = 'we hope you enjoyed the ride.'; you can now append the new paragraph at the end of the section using node.appendchild(): sect.appendchild(para); finally for this part, let's add a text node to the paragraph the link sits inside, to round off the sentence nicely.

JavaScript object basics - Learn web development
when you accessed the document object model using lines like this: const mydiv = document.createelement('div'); const myvideo = document.queryselector('video'); you were using methods available on an instance of the document class.

Handling common HTML and CSS problems - Learn web development
for example: const asideelem = document.createelement('aside'); ...

Handling common JavaScript problems - Learn web development
loadscript() looks like this: function loadscript(src, done) { const js = document.createelement('script'); js.src = src; js.onload = function() { done(); }; js.onerror = function() { done(new error('failed to load script ' + src)); }; document.head.appendchild(js); } this function creates a new <script> element, then sets its src attribute to the path we specified as the first argument ('polyfills.js' when we called it in the code above).

CustomizableUI.jsm
customizableui.createwidget({ id: 'navigator-throbber', //id in cui.jsm // should match id of that in dom (line #11) type: 'custom', defaultarea: customizableui.area_navbar, onbuild: function(adocument) { var toolbaritem = adocument.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbaritem'); var image = adocument.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'image'); image.setattribute('src', 'chrome://branding/content/icon16.png'); var props = { id: 'navigator-throbber', //id in dom // should match id of that in cui.jsm (line #2)...

OS.File for the main thread
var img = new image(); img.onload = function() { var canvas = document.createelementns('http://www.w3.org/1999/xhtml', 'canvas'); canvas.width = img.naturalwidth; canvas.height = img.naturalheight; var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); (canvas.toblobhd || canvas.toblob).call(canvas, function(b) { var r = cc['@mozilla.org/files/filereader;1'].createinstance(ci.nsidomfilereader); //new filereader(); r.onloadend = function()...

Browser Console - Firefox Developer Tools
on windows, the following code will add a new item to the browser's main menu: var parent = window.document.getelementbyid("appmenuprimarypane"); var makethetea = gbrowser.ownerdocument.defaultview.document.createelementns("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem"); makethetea.setattribute("label", "a nice cup of tea?"); parent.appendchild(makethetea); on macos, this similar code will add a new item to the "tools" menu: var parent = window.document.getelementbyid("menu_toolspopup"); var makethetea = gbrowser.ownerdocument.defaultview.document.createelementns("http://www.mozilla...

Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
</div> <script> function makefactory(type) { return function factory(content) { var elt = document.createelement(type); elt.textcontent = content; return elt; }; } var divfactory = makefactory('div'); var spanfactory = makefactory('span'); function divsandspans() { for (i = 0; i < 10; i++) { var div = divfactory('div #' + i); div.appendchild(spanfactory('span #' + i)); document.body.appendchild(div); } } function dodivsandspans() { divsandspans(); } <...

DOM allocation example - Firefox Developer Tools
it just contains a script that creates a large number of dom nodes: var toolbarbuttoncount = 20; var toolbarcount = 200; function getrandomint(min, max) { return math.floor(math.random() * (max - min + 1)) + min; } function createtoolbarbutton() { var toolbarbutton = document.createelement("span"); toolbarbutton.classlist.add("toolbarbutton"); // stop spidermonkey from sharing instances toolbarbutton[getrandomint(0,5000)] = "foo"; return toolbarbutton; } function createtoolbar() { var toolbar = document.createelement("div"); // stop spidermonkey from sharing instances toolbar[getrandomint(0,5000)] = "foo"; for (var i = 0; i < toolbarbuttoncount; i++) { var tool...

AnalyserNode.getFloatFrequencyData() - Web APIs
de = audioctx.createmediaelementsource(audioele); //create analyser node const analysernode = audioctx.createanalyser(); analysernode.fftsize = 256; const bufferlength = analysernode.frequencybincount; const dataarray = new float32array(bufferlength); //set up audio node network audiosourcenode.connect(analysernode); analysernode.connect(audioctx.destination); //create 2d canvas const canvas = document.createelement('canvas'); canvas.style.position = 'absolute'; canvas.style.top = 0; canvas.style.left = 0; canvas.width = window.innerwidth; canvas.height = window.innerheight; document.body.appendchild(canvas); const canvasctx = canvas.getcontext('2d'); canvasctx.clearrect(0, 0, canvas.width, canvas.height); function draw() { //schedule next redraw requestanimationframe(draw); //get spectrum data an...

Animation.startTime - Web APIs
*/ function addcat(){ var newcat = document.createelement("div"); newcat.classlist.add("cat"); return newcat; } /* this is the function that adds a cat to the waapi column */ function animatenewcatwithwaapi() { // make a new cat var newcat = addcat(); // animate said cat with the waapi's "animate" function var newanimationplayer = newcat.animate(keyframes, timing); // set the animation's start time to be the same as the original .cat#wi...

Background Tasks API - Web APIs
function log(text) { if (!logfragment) { logfragment = document.createdocumentfragment(); } let el = document.createelement("div"); el.innerhtml = text; logfragment.appendchild(el); } first, we create a documentfragment object named logfragment if one doesn't currently exist.

BiquadFilterNode.getFrequencyResponse() - Web APIs
function calcfrequencyresponse() { biquadfilter.getfrequencyresponse(myfrequencyarray,magresponseoutput,phaseresponseoutput); for(i = 0; i <= myfrequencyarray.length-1;i++){ var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + myfrequencyarray[i] + 'hz</strong>: magnitude ' + magresponseoutput[i] + ', phase ' + phaseresponseoutput[i] + ' radians.'; freqresponseoutput.appendchild(listitem); } } calcfrequencyresponse(); specifications specification status comment web audio apithe definition of 'getfrequencyresponse()' in that specification.

Blob - Web APIs
function typedarraytourl(typedarray, mimetype) { return url.createobjecturl(new blob([typedarray.buffer], {type: mimetype})) } const bytes = new uint8array(59); for(let i = 0; i < 59; i++) { bytes[i] = 32 + i; } const url = typedarraytourl(bytes, 'text/plain'); const link = document.createelement('a'); link.href = url; link.innertext = 'open the array url'; document.body.appendchild(link); result click the link in the example to see the browser decode the object url.

CSSStyleSheet.insertRule() - Web APIs
* @param {array} rules accepts an array of json-encoded declarations * @example addstylesheetrules([ ['h2', // also accepts a second argument as an array of arrays instead ['color', 'red'], ['background-color', 'green', true] // 'true' for !important rules ], ['.myclass', ['background-color', 'yellow'] ] ]); */ function addstylesheetrules (rules) { var styleel = document.createelement('style'); // append <style> element to <head> document.head.appendchild(styleel); // grab style element's sheet var stylesheet = styleel.sheet; for (var i = 0; i < rules.length; i++) { var j = 1, rule = rules[i], selector = rule[0], propstr = ''; // if the second argument of a rule is an array of arrays, correct our variables.

CanvasRenderingContext2D.putImageData() - Web APIs
javascript const canvas = document.createelement("canvas"); canvas.width = 1; canvas.height = 1; const context = canvas.getcontext("2d"); const imgdata = context.getimagedata(0, 0, canvas.width, canvas.height); const pixels = imgdata.data; pixels[0 + 0] = 1; pixels[0 + 1] = 127; pixels[0 + 2] = 255; pixels[0 + 3] = 1; console.log("before:", pixels); context.putimagedata(imgdata, 0, 0); const imgdata2 = context.getimagedata(0, 0, canvas.width, c...

Optimizing canvas - Web APIs
mycanvas.offscreencanvas = document.createelement('canvas'); mycanvas.offscreencanvas.width = mycanvas.width; mycanvas.offscreencanvas.height = mycanvas.height; mycanvas.getcontext('2d').drawimage(mycanvas.offscreencanvas, 0, 0); avoid floating-point coordinates and use integers instead sub-pixel rendering occurs when you render objects on a canvas without whole values.

Using images - Web APIs
{ display: none; } table { margin: 0 auto; } td { padding: 15px; } tying it all together is the javascript to draw our framed images: function draw() { // loop through all images for (var i = 0; i < document.images.length; i++) { // don't add a canvas for the frame image if (document.images[i].getattribute('id') != 'frame') { // create canvas element canvas = document.createelement('canvas'); canvas.setattribute('width', 132); canvas.setattribute('height', 150); // insert before the image document.images[i].parentnode.insertbefore(canvas,document.images[i]); ctx = canvas.getcontext('2d'); // draw image to canvas ctx.drawimage(document.images[i], 15, 20); // add frame ctx.drawimage(document.getelementbyid('frame'), 0,...

Using channel messaging - Web APIs
e iframe over in the iframe, we have the following javascript: var list = document.queryselector('ul'); var port2; // listen for the initial port transfer message window.addeventlistener('message', initport); // setup the transferred port function initport(e) { port2 = e.ports[0]; port2.onmessage = onmessage; } // handle messages received on port2 function onmessage(e) { var listitem = document.createelement('li'); listitem.textcontent = e.data; list.appendchild(listitem); port2.postmessage('message received by iframe: "' + e.data + '"'); } when the initial message is received from the main page via the window.postmessage method, we run the initport function.

ChildNode.replaceWith() - Web APIs
examples using replacewith() var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.replacewith(span); console.log(parent.outerhtml); // "<div><span></span></div>" childnode.replacewith() is unscopable the replacewith() method is not scoped into the with statement.

CustomElementRegistry.upgrade() - Web APIs
examples taken from the html spec: const el = document.createelement("spider-man"); class spiderman extends htmlelement {} customelements.define("spider-man", spiderman); console.assert(!(el instanceof spiderman)); // not yet upgraded customelements.upgrade(el); console.assert(el instanceof spiderman); // upgraded!

CustomElementRegistry - Web APIs
nt words in element's parent element var wcparent = this.parentnode; function countwords(node){ var text = node.innertext || node.textcontent return text.split(/\s+/g).length; } var count = 'words: ' + countwords(wcparent); // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create text node and add word count to it var text = document.createelement('span'); text.textcontent = count; // append it to the shadow root shadow.appendchild(text); // update count when element content changes setinterval(function() { var count = 'words: ' + countwords(wcparent); text.textcontent = count; }, 200) } } // define the new element customelements.define('word-count', wordcount, { extends: 'p' }); note: the custo...

DOMImplementation.createDocument() - Web APIs
example var doc = document.implementation.createdocument ('http://www.w3.org/1999/xhtml', 'html', null); var body = document.createelementns('http://www.w3.org/1999/xhtml', 'body'); body.setattribute('id', 'abc'); doc.documentelement.appendchild(body); alert(doc.getelementbyid('abc')); // [object htmlbodyelement] specifications specification status comment domthe definition of 'domimplementation.createdocument' in that specification.

DataTransferItem.webkitGetAsEntry() - Web APIs
let dropzone = document.getelementbyid("dropzone"); let listing = document.getelementbyid("listing"); function scanfiles(item, container) { let elem = document.createelement("li"); elem.innerhtml = item.name; container.appendchild(elem); if (item.isdirectory) { let directoryreader = item.createreader(); let directorycontainer = document.createelement("ul"); container.appendchild(directorycontainer); directoryreader.readentries(function(entries) { entries.foreach(function(entry) { scanfiles(entry, directorycontainer); }); ...

Document.anchors - Web APIs
anchors.length >= 5) { dump("found too many anchors"); } the following is an example that auto populates a table of contents with every anchor on the page: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>test</title> <script> function init() { var toc = document.getelementbyid("toc"); var i, li, newanchor; for (i = 0; i < document.anchors.length; i++) { li = document.createelement("li"); newanchor = document.createelement('a'); newanchor.href = "#" + document.anchors[i].name; newanchor.innerhtml = document.anchors[i].text; li.appendchild(newanchor); toc.appendchild(li); } } </script> </head> <body onload="init()"> <h1>title</h1> <h2><a name="contents">contents</a></h2> <ul id="toc"></ul> <h2><a name="plants">plants</a></h2> <ol> <li>apples</li> ...

Document.body - Web APIs
syntax const objref = document.body document.body = objref example // given this html: <body id="oldbodyelement"></body> alert(document.body.id); // "oldbodyelement" const anewbodyelement = document.createelement("body"); anewbodyelement.id = "newbodyelement"; document.body = anewbodyelement; alert(document.body.id); // "newbodyelement" notes document.body is the element that contains the content for the document.

Document.caretRangeFromPoint() - Web APIs
(e.clientx, e.clienty); textnode = range.offsetnode; offset = range.offset; } else if (document.caretrangefrompoint) { range = document.caretrangefrompoint(e.clientx, e.clienty); textnode = range.startcontainer; offset = range.startoffset; } // only split text_nodes if (textnode && textnode.nodetype == 3) { let replacement = textnode.splittext(offset); let br = document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } let paragraphs = document.getelementsbytagname("p"); for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].addeventlistener('click', insertbreakatpoint, false); } result ...

Document.createDocumentFragment() - Web APIs
html <ul id="ul"> </ul> javascript var element = document.getelementbyid('ul'); // assuming ul exists var fragment = document.createdocumentfragment(); var browsers = ['firefox', 'chrome', 'opera', 'safari', 'internet explorer']; browsers.foreach(function(browser) { var li = document.createelement('li'); li.textcontent = browser; fragment.appendchild(li); }); element.appendchild(fragment); result specifications specification status comment domthe definition of 'document.createdocumentfragment()' in that specification.

Document.getElementById() - Web APIs
when creating an element and assigning it an id, you have to insert the element into the document tree with node.insertbefore() or a similar method before you can access it with getelementbyid(): var element = document.createelement('div'); element.id = 'testqq'; var el = document.getelementbyid('testqq'); // el will be null!

Document.links - Web APIs
example var links = document.links; for(var i = 0; i < links.length; i++) { var linkhref = document.createtextnode(links[i].href); var linebreak = document.createelement("br"); document.body.appendchild(linkhref); document.body.appendchild(linebreak); } specifications specification status comment html living standardthe definition of 'document.links' in that specification.

Document.mozSetImageElement() - Web APIs
var c = 0x00; function clicked() { var canvas = document.createelement("canvas"); canvas.setattribute("width", 100); canvas.setattribute("height", 100); var ctx = canvas.getcontext('2d'); ctx.fillstyle = "#" + c.tostring(16) + "0000"; ctx.fillrect(25, 25, 75, 75); c += 0x11; if (c > 0xff) { c = 0x00; } document.mozsetimageelement("canvasbg", canvas); } the code here is called each time the user clicks the <div> element.

Document.readyState - Web APIs
var span = document.createelement("span"); span.textcontent = "a <span> element."; document.body.appendchild(span); break; case "complete": // the page is fully loaded.

Document.styleSheetSets - Web APIs
example given an <ul> (list) element with the id "sheetlist", you can populate it with the names of all the available style sheet sets with code like this: let list = document.getelementbyid('sheetlist'); let sheets = document.stylesheetsets; list.innerhtml = ''; for (let i = 0; i < sheets.length; i++) { let item = document.createelement('li'); item.innerhtml = sheets[i]; list.appendchild(item); } notes the list of available style sheet sets is constructed by enumerating all the style sheets available for the document, in the order in which they're listed in the document.stylesheets attribute, adding the title of each style sheet that has a title to the list.

Document.xmlVersion - Web APIs
to detect this, you can create an element with its name in lower case, then check to see if it gets converted into all upper case (in which case the document is in the non-xml html mode): if (document.createelement("foo").tagname == "foo") { /* document is not xml */ } specifications http://www.w3.org/tr/dom-level-3-cor...ument3-version this has been removed from dom core level 4wd ...

DocumentFragment - Web APIs
example html <ul id="list"></ul> javascript var list = document.queryselector('#list') var fruits = ['apple', 'orange', 'banana', 'melon'] var fragment = new documentfragment() fruits.foreach(function (fruit) { var li = document.createelement('li') li.innerhtml = fruit fragment.appendchild(li) }) list.appendchild(fragment) result specifications specification status comment domthe definition of 'documentfragment' in that specification.

DocumentOrShadowRoot.caretPositionFromPoint() - Web APIs
onfrompoint(e.clientx, e.clienty); textnode = range.offsetnode; offset = range.offset; } else if (document.caretrangefrompoint) { range = document.caretrangefrompoint(e.clientx, e.clienty); textnode = range.startcontainer; offset = range.startoffset; } // only split text_nodes if (textnode.nodetype == 3) { var replacement = textnode.splittext(offset); var br = document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } window.onload = function (){ var paragraphs = document.getelementsbytagname("p"); for (i=0 ; i < paragraphs.length; i++) { paragraphs[i].addeventlistener("click", insertbreakatpoint, false); } }; specifications specification status comment css object model (cssom) view modulethe definition of ...

Example - Web APIs
var para = document.getelementsbytagname("p").item(0); para.firstchild.data = "this is the first paragraph."; // create a new text node for the second paragraph var newtext = document.createtextnode("this is the second paragraph."); // create a new element to be the second paragraph var newelement = document.createelement("p"); // put the text in the paragraph newelement.appendchild(newtext); // and put the paragraph on the end of the document by appending it to // the body (which is the parent of para) para.parentnode.appendchild(newelement); } </script> </head> <body> <input type="button" value="change this document." onclick="change()"> <h1>header</h1> <p>paragraph</p> ...

Using the W3C DOM Level 1 Core - Web APIs
var para = document.getelementsbytagname("p").item(0); para.firstchild.data = "this is the first paragraph."; // create a new text node for the second paragraph var newtext = document.createtextnode("this is the second paragraph."); // create a new element to be the second paragraph var newelement = document.createelement("p"); // put the text in the paragraph newelement.appendchild(newtext); // and put the paragraph on the end of the document by appending it to // the body (which is the parent of para) para.parentnode.appendchild(newelement); } you can see this script as a complete example.

Element.attachShadow() - Web APIs
s in element's parent element var wcparent = this.parentnode; function countwords(node){ var text = node.innertext || node.textcontent return text.trim().split(/\s+/g).length; } var count = 'words: ' + countwords(wcparent); // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create text node and add word count to it var text = document.createelement('span'); text.textcontent = count; // append it to the shadow root shadow.appendchild(text); // update count when element content changes setinterval(function() { var count = 'words: ' + countwords(wcparent); text.textcontent = count; }, 200) } } // define the new element customelements.define('word-count', wordcount, { extends: 'p' }); specifications ...

Element.computedStyleMap() - Web APIs
selector('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = myelement.computedstylemap(); // iterate thru the map of all the properties and values, adding a <dt> and <dd> for each for (const [prop, val] of allcomputedstyles) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(prop)); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode(val)); styleslist.appendchild(cssvalue); } in browsers that support computedstylemap(), you'll see a list of all the css properties and values.

Element.getBoundingClientRect() - Web APIs
<div></div> div { width: 400px; height: 200px; padding: 20px; margin: 50px auto; background: purple; } let elem = document.queryselector('div'); let rect = elem.getboundingclientrect(); for (var key in rect) { if(typeof rect[key] !== 'function') { let para = document.createelement('p'); para.textcontent = `${ key } : ${ rect[key] }`; document.body.appendchild(para); } } notice how the width/height are equal to the equal to its width/height + padding.

Element.getClientRects() - Web APIs
*/ var rects = elt.getclientrects(); for (var i = 0; i != rects.length; i++) { var rect = rects[i]; var tablerectdiv = document.createelement('div'); tablerectdiv.style.position = 'absolute'; tablerectdiv.style.border = '1px solid red'; var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; var scrollleft = document.documentelement.scrollleft || document.body.scrollleft; tablerectdiv.style.margin = tablerectdiv.style.padding = '0'; tablerectdiv.style.top = (rect.top + scrolltop) + 'px'; ...

Element.insertAdjacentElement() - Web APIs
example beforebtn.addeventlistener('click', function() { var tempdiv = document.createelement('div'); tempdiv.style.backgroundcolor = randomcolor(); if (activeelem) { activeelem.insertadjacentelement('beforebegin',tempdiv); } setlistener(tempdiv); }); afterbtn.addeventlistener('click', function() { var tempdiv = document.createelement('div'); tempdiv.style.backgroundcolor = randomcolor(); if (activeelem) { activeelem.insertadjacentelement('afterend',tempdiv); } ...

Element: mouseenter event - Web APIs
tereventcount + '.'); }); mousetarget.addeventlistener('mouseleave', e => { mousetarget.style.border = '1px solid #333'; leaveeventcount++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode); // add the newly created list item to list unorderedlist.appendchild(newlistitem); } result specifications specification status ui eventsthe definition of 'mouseenter' in that specification.

Element: mouseleave event - Web APIs
tereventcount + '.'); }); mousetarget.addeventlistener('mouseleave', e => { mousetarget.style.border = '1px solid #333'; leaveeventcount++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode); // add the newly created list item to list unorderedlist.appendchild(newlistitem); } result specifications specification status ui eventsthe definition of 'mouseleave' in that specification.

Element.name - Web APIs
lue="foo"> </form> <script type="text/javascript"> // get a reference to the first element in the form let formelement = document.forms['forma'].elements[0] // give it a name formelement.name = 'inputa' // show the value of the input alert(document.forms['forma'].elements['inputa'].value) </script> notes in internet explorer (ie), the name property of dom objects created using document.createelement() can't be set or modified.

Element.namespaceURI - Web APIs
you can create an element with the specified namespaceuri using the dom level 2 method document.createelementns.

Element.scrollHeight - Web APIs
"thank you." : "please, scroll and read the following text."; } onload = function () { var otoberead = document.getelementbyid("rules"); checkreading.noticebox = document.createelement("span"); document.registration.accept.checked = false; checkreading.noticebox.id = "notice"; otoberead.parentnode.insertbefore(checkreading.noticebox, otoberead); otoberead.parentnode.insertbefore(document.createelement("br"), otoberead); otoberead.onscroll = checkreading; checkreading.call(otoberead); } specifications specification status comment css objec...

Event.composed - Web APIs
the first definition looks like this, for example: customelements.define('open-shadow', class extends htmlelement { constructor() { super(); let pelem = document.createelement('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a click event listener on the <html> element: do...

Event.composedPath() - Web APIs
the first definition looks like this, for example: customelements.define('open-shadow', class extends htmlelement { constructor() { super(); let pelem = document.createelement('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a click event listener on the <html> element: do...

Event.preventDefault() - Web APIs
it's not an elegant function but does the job for the purposes of this example: var warningtimeout; var warningbox = document.createelement("div"); warningbox.classname = "warning"; function displaywarning(msg) { warningbox.innerhtml = msg; if (document.body.contains(warningbox)) { window.cleartimeout(warningtimeout); } else { // insert warningbox after mytextbox mytextbox.parentnode.insertbefore(warningbox, mytextbox.nextsibling); } warningtimeout = window.settimeout(function() { warningbox.parentnode.

Event.target - Web APIs
// make a list const ul = document.createelement('ul'); document.body.appendchild(ul); const li1 = document.createelement('li'); const li2 = document.createelement('li'); ul.appendchild(li1); ul.appendchild(li2); function hide(evt) { // e.target refers to the clicked <li> element // this is different than e.currenttarget, which would refer to the parent <ul> in this context evt.target.style.visibility = 'hidden'; } // attach the listen...

EventSource() - Web APIs
examples var evtsource = new eventsource('sse.php'); var eventlist = document.queryselector('ul'); evtsource.onmessage = function(e) { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); } note: you can find a full example on github — see simple sse demo using php.

EventSource: message event - Web APIs
var evtsource = new eventsource('sse.php'); var eventlist = document.queryselector('ul'); evtsource.addeventlistener('message', (e) => { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); }); onmessage equivalent evtsource.onmessage = (e) => { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); }; specifications specification status html living standardthe definition of 'message ev...

EventSource.onmessage - Web APIs
syntax eventsource.onmessage = function examples evtsource.onmessage = function(e) { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); } note: you can find a full example on github — see simple sse demo using php.

EventSource - Web APIs
var evtsource = new eventsource('sse.php'); var eventlist = document.queryselector('ul'); evtsource.onmessage = function(e) { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); } each received event causes our eventsource object's onmessage event handler to be run.

File.webkitRelativePath - Web APIs
html content <input type="file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitrelativepath' in that specification.

FileReader.readAsBinaryString() - Web APIs
example var canvas = document.createelement('canvas'); var height = 200; var width = 200; canvas.width = width; canvas.height = height; var ctx = canvas.getcontext('2d'); ctx.strokestyle = '#090'; ctx.beginpath(); ctx.arc(width/2, height/2, width/2 - width/10, 0, math.pi*2); ctx.stroke(); canvas.toblob(function (blob) { var reader = new filereader(); reader.onload = function () { console.log(reader.result); } reader.rea...

FileSystemDirectoryReader.readEntries() - Web APIs
let dropzone = document.getelementbyid("dropzone"); let listing = document.getelementbyid("listing"); function scanfiles(item, container) { let elem = document.createelement("li"); elem.innerhtml = item.name; container.appendchild(elem); if (item.isdirectory) { let directoryreader = item.createreader(); let directorycontainer = document.createelement("ul"); container.appendchild(directorycontainer); directoryreader.readentries(function(entries) { entries.foreach(function(entry) { scanfiles(entry, directorycontainer); }); ...

FileSystemEntry.toURL() - Web APIs
code that makes use of this might look like this: let img = document.createelement("img"); img.src = imagefileentry.tourl(); document.body.appendchild(img); assuming the scenario mentioned before the code, the result would be html that looks like this being appended to the end of the document: <img src="filesystem:http://my-awesome-website.woot/temporary/awesomesauce.jpg"> browser compatibility the compatibility table on this page is generated from structured data.

GlobalEventHandlers.onmousemove - Web APIs
html <p><a href="#" data-tooltip="first link">see a tooltip here &hellip;</a></p> <p><a href="#" data-tooltip="second link">&hellip; or here!</a></p> css .tooltip { position: absolute; z-index: 9999; padding: 6px; background: #ffd; border: 1px #886 solid; border-radius: 5px; } javascript const tooltip = new (function() { const node = document.createelement('div'); node.classname = 'tooltip'; node.setattribute('hidden', ''); document.body.appendchild(node); this.follow = function(event) { node.style.left = event.clientx + 20 + 'px'; node.style.top = event.clienty + 10 + 'px'; }; this.show = function(event) { node.textcontent = event.target.dataset.tooltip; node.removeattribute('hidden'); }; this.hide = function() {...

HTMLAnchorElement.referrerPolicy - Web APIs
examples var elt = document.createelement("a"); var linktext = document.createtextnode("my link"); elt.appendchild(linktext); elt.href = "https://developer.mozilla.org/"; elt.referrerpolicy = "no-referrer"; var div = document.getelementbyid("divaround"); div.appendchild(elt); // when clicked, the link will not send a referrer header.

HTMLAreaElement.referrerPolicy - Web APIs
examples <img usemap="#maparound" width="100" height="100" src="/img/logo@2x.png" /> <map id="mymap" name="maparound" />> var elt = document.createelement("area"); elt.href = "/img2.png"; elt.shape = "rect"; elt.referrerpolicy = "no-referrer"; elt.coords = "0,0,100,100"; var map = document.getelementbyid("mymap"); map.appendchild(elt); // when clicked, the area's link will not send a referrer header.

HTMLCanvasElement.mozGetAsFile() - Web APIs
10, 55, 50); ctx.fillstyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillrect(30, 30, 55, 50); var link = document.getelementbyid('link'); link.addeventlistener('click', copy); } function copy() { var canvas = document.getelementbyid('canvas'); var f = canvas.mozgetasfile('test.png'); var reader = new filereader(); reader.readasdataurl(f); reader.onloadend = function() { var newimg = document.createelement('img'); newimg.src = reader.result; document.body.appendchild(newimg); } } window.addeventlistener('load', draw); specifications not part of any specification.

HTMLCanvasElement.toDataURL() - Web APIs
window.addeventlistener('load', removecolors); function showcolorimg() { this.style.display = 'none'; this.nextsibling.style.display = 'inline'; } function showgrayimg() { this.previoussibling.style.display = 'inline'; this.style.display = 'none'; } function removecolors() { var aimages = document.getelementsbyclassname('grayscale'), nimgslen = aimages.length, ocanvas = document.createelement('canvas'), octx = ocanvas.getcontext('2d'); for (var nwidth, nheight, oimgdata, ograyimg, npixel, apix, npixlen, nimgid = 0; nimgid < nimgslen; nimgid++) { ocolorimg = aimages[nimgid]; nwidth = ocolorimg.offsetwidth; nheight = ocolorimg.offsetheight; ocanvas.width = nwidth; ocanvas.height = nheight; octx.drawimage(ocolorimg, 0, 0); oimgdata = octx.getimagedata(...

HTMLCanvasElement.transferControlToOffscreen() - Web APIs
examples var htmlcanvas = document.createelement('canvas'); var offscreen = htmlcanvas.transfercontroltooffscreen(); var gl = offscreen.getcontext('webgl'); // ...

accessKeyLabel - Web APIs
syntax label = element.accesskeylabel example javascript var node = document.getelementbyid('btn1'); if (node.accesskeylabel) { node.title += ' [' + node.accesskeylabel + ']'; } else { node.title += ' [' + node.accesskey + ']'; } node.onclick = function () { var p = document.createelement('p'); p.textcontent = 'clicked!'; node.parentnode.appendchild(p); }; html <button accesskey="h" title="caption" id="btn1">hover me</button> result specifications specification status comment html living standardthe definition of 'htmlelement.accesskeylabel' in that specification.

HTMLElement.title - Web APIs
syntax var str = element.title; element.title = str; example const link = document.createelement('a'); link.innertext = 'grapes'; link.href = 'https://en.wikipedia.org/wiki/grape'; link.title = 'wikipedia page on grapes'; specifications specification status comment html living standardthe definition of 'title' in that specification.

HTMLFormElement.method - Web APIs
syntax var string = form.method; form.method = string; example document.forms['myform'].method = 'post'; const formelement = document.createelement("form"); // create a form document.body.appendchild(formelement); console.log(formelement.method); // 'get' specifications specification status comment html living standardthe definition of 'htmlformelement: method' in that specification.

HTMLFormElement - Web APIs
examples creating a new form element, modifying its attributes, then submitting it: const f = document.createelement("form"); // create a form document.body.appendchild(f); // add it to the document body f.action = "/cgi-bin/some.cgi"; // add action and method attributes f.method = "post"; f.submit(); // call the form's submit() method extract information from a <form> element and set some of its attributes: <form name="forma" action="/cgi-bin/test" method=...

HTMLHyperlinkElementUtils.host - Web APIs
syntax string = object.host; object.host = string; examples var anchor = document.createelement("a"); anchor.href = "https://developer.mozilla.org/htmlhyperlinkelementutils.host" anchor.host == "developer.mozilla.org" anchor.href = "https://developer.mozilla.org:443/htmlhyperlinkelementutils.host" anchor.host == "developer.mozilla.org" // the port number is not included because 443 is the scheme's default port anchor.href = "https://developer.mozilla.org:4097/htmlhyperlinkelementutils.host" anchor.host == "developer.mozilla.org:4097" specifications specification status comment html living standardth...

HTMLIFrameElement.referrerPolicy - Web APIs
examples var iframe = document.createelement("iframe"); iframe.src = "/"; iframe.referrerpolicy = "unsafe-url"; var body = document.getelementsbytagname("body")[0]; body.appendchild(iframe); // fetch the image using the complete url as the referrer specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.

HTMLIFrameElement.src - Web APIs
syntax refstr = iframeelt.src; iframeelt.src= refstr; example var iframe = document.createelement("iframe"); iframe.src = "/"; var body = document.getelementsbytagname("body")[0]; body.appendchild(iframe); // fetch the image using the complete url as the referrer specifications specification status comment html living standardthe definition of 'htmliframeelement: src' in that specification.

srcdoc - Web APIs
examples var iframe = document.createelement("iframe"); iframe.srcdoc = `<!doctype html><p>hello world!</p>`; document.body.appendchild(iframe); specifications specification status comment html living standardthe definition of 'htmliframeelement: srcdoc' in that specification.

Image() - Web APIs
it is functionally equivalent to document.createelement('img').

HTMLImageElement.crossOrigin - Web APIs
const imageurl = "https://mdn.mozillademos.org/files/16797/clock-demo-400px.png"; const container = document.queryselector(".container"); function loadimage(url) { const image = new image(200, 200); image.addeventlistener("load", () => container.prepend(image) ); image.addeventlistener("error", () => { const errmsg = document.createelement("output"); errmsg.value = `error loading image at ${url}`; container.append(errmsg); }); image.crossorigin = "anonymous"; image.alt = ""; image.src = url; } loadimage(imageurl); html <div class="container"> <p>here's a paragraph.

HTMLImageElement.currentSrc - Web APIs
html <img src="/files/16797/clock-demo-400px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 400px) 50%, 90%"> javascript var clockimage = document.queryselector("img"); let p = document.createelement("p"); if (!clockimage.currentsrc.endswith("200px.png")) { p.innertext = "using the 200px image."; } else { p.innertext = "using the 400px image!"; } document.body.appendchild(p); result specifications specification status comment html living standardthe definition of 'htmlimageelement.currentsrc' in that specification.

HTMLImageElement.loading - Web APIs
function addimagetolist(url) { const list = document.queryselector("div.photo-list"); let newitem = document.createelement("div"); newitem.classname = "photo-item"; let newimg = document.createelement("img"); newimg.loading = "lazy"; newimg.width = 320; newimg.height = 240; newimg.src = url; newitem.appendchild(newimg); list.appendchild(newitem); } specifications specification status comment html living standardthe definition of 'htmlimageelement.loading' in that speci...

HTMLImageElement.srcset - Web APIs
let box = document.queryselector(".box"); let image = box.queryselector("img"); let newelem = document.createelement("p"); newelem.innerhtml = `image: <code>${image.currentsrc}</code>`; box.appendchild(newelem); result in the displayed output below, the selected url will correspond with whether your display results in selecting the 1x or the 2x version of the image.

HTMLInputElement.webkitdirectory - Web APIs
html content <input type="file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitdirectory' in that specification.

HTMLMediaElement: abort event - Web APIs
bubbles no cancelable no interface event event handler property onabort examples const video = document.queryselector('video'); const videosrc = 'https://path/to/video.webm'; video.addeventlistener('abort', () => { console.log(`abort loading: ${videosrc}`); }); const source = document.createelement('source'); source.setattribute('src', videosrc); source.setattribute('type', 'video/webm'); video.appendchild(source); specifications specification status html living standard living standard html5 recommendation ...

HTMLMediaElement.buffered - Web APIs
example var obj = document.createelement('video'); console.log(obj.buffered); // timeranges { length: 0 } specifications specification status comment html living standardthe definition of 'htmlmediaelement.buffered' in that specification.

HTMLMediaElement.canPlayType() - Web APIs
example var obj = document.createelement('video'); console.log(obj.canplaytype('video/mp4')); // "maybe" specifications specification status comment html living standardthe definition of 'canplaytype' in that specification.

HTMLMediaElement.controls - Web APIs
example var obj = document.createelement('video'); obj.controls = true; specifications specification status comment html living standardthe definition of 'htmlmediaelement.controls' in that specification.

HTMLMediaElement.currentSrc - Web APIs
example var obj = document.createelement('video'); console.log(obj.currentsrc); // "" specifications specification status comment html living standardthe definition of 'htmlmediaelement.currentsrc' in that specification.

HTMLMediaElement.currentTime - Web APIs
example var video = document.createelement('video'); console.log(video.currenttime); usage notes reduced time precision to offer protection against timing attacks and fingerprinting, browsers may round or otherwise adjust the value returned by currenttime.

HTMLMediaElement.defaultMuted - Web APIs
example var videoele = document.createelement('video'); videoele.defaultmuted = true; console.log(videoele.outerhtml); // <video muted=""></video> specifications specification status comment html living standardthe definition of 'htmlmediaelement.defaultmuted' in that specification.

HTMLMediaElement.defaultPlaybackRate - Web APIs
example var obj = document.createelement('video'); console.log(obj.defaultplaybackrate); // 1 specifications specification status comment html living standardthe definition of 'htmlmediaelement.defaultplaybackrate' in that specification.

HTMLMediaElement.disableRemotePlayback - Web APIs
(false means "not disabled", which means "enabled") example var obj = document.createelement('audio'); obj.disableremoteplayback = true; specifications specification status comment remote playback apithe definition of 'disableremoteplayback' in that specification.

HTMLMediaElement.duration - Web APIs
examples var obj = document.createelement('video'); console.log(obj.duration); // nan specifications specification status comment html living standardthe definition of 'htmlmediaelement.duration' in that specification.

HTMLMediaElement.ended - Web APIs
example var obj = document.createelement('video'); console.log(obj.ended); // false specifications specification status comment html living standardthe definition of 'htmlmediaelement.ended' in that specification.

HTMLMediaElement.error - Web APIs
var videoelement = document.createelement('video'); videoelement.onerror = function() { console.log("error " + videoelement.error.code + "; details: " + videoelement.error.message); } videoelement.src = "https://example.com/bogusvideo.mp4"; specifications specification status comment html living standardthe definition of 'htmlmediaelement.error' in that specification.

HTMLMediaElement: loadstart event - Web APIs
event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status html living standardthe definition of 'loadstart media event' in that specification.

HTMLMediaElement.loop - Web APIs
example var obj = document.createelement('video'); obj.loop = true; // true specifications specification status comment html living standardthe definition of 'htmlmediaelement.loop' in that specification.

HTMLMediaElement.muted - Web APIs
example var obj = document.createelement('video'); console.log(obj.muted); // false specifications specification status comment html living standardthe definition of 'htmlmediaelement.muted' in that specification.

HTMLMediaElement.paused - Web APIs
example var obj = document.createelement('video'); console.log(obj.paused); // true specifications specification status comment html living standardthe definition of 'htmlmediaelement.paused' in that specification.

HTMLMediaElement.playbackRate - Web APIs
(default: 1.0) example var obj = document.createelement('video'); console.log(obj.playbackrate); // expected output: 1 specifications specification status comment html living standardthe definition of 'htmlmediaelement.playbackrate' in that specification.

HTMLMediaElement: progress event - Web APIs
event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status html living standardthe definition of 'progress media event' in that specification.

HTMLMediaElement.setSinkId() - Web APIs
exceptions exception explanation domexception no permission to use the requested device examples const devices = await navigator.mediadevices.enumeratedevices(); const audiodevices = devices.filter(device => device.kind === 'audiooutput'); const audio = document.createelement('audio'); await audio.setsinkid(audiodevices[0].deviceid); console.log('audio is being played on ' + audio.sinkid); specifications specification status comment audio output devices apithe definition of 'sinkid' in that specification.

HTMLMediaElement.src - Web APIs
example var obj = document.createelement('video'); console.log(obj.src); // "" specifications specification status comment html living standardthe definition of 'htmlmediaelement.src' in that specification.

HTMLMediaElement.volume - Web APIs
example var obj = document.createelement('audio'); console.log(obj.volume); // 1 obj.volume = 0.75; specifications specification status comment html living standardthe definition of 'htmlmediaelement.volume' in that specification.

HTMLScriptElement.referrerPolicy - Web APIs
examples var scriptelem = document.createelement("script"); scriptelem.src = "/"; scriptelem.referrerpolicy = "unsafe-url"; document.body.appendchild(script); specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.

HTMLTableElement.createCaption() - Web APIs
the caption does not need to be added separately as would be the case if document.createelement() had been used to create the new <caption> element.

HTMLTableElement.createTFoot() - Web APIs
the footer does not need to be added separately as would be the case if document.createelement() had been used to create the new <tfoot> element.

HTMLTableElement.createTHead() - Web APIs
the header does not need to be added separately as would be the case if document.createelement() had been used to create the new <thead> element.

HTMLTableElement.insertRow() - Web APIs
the row does not need to be appended separately as would be the case if document.createelement() had been used to create the new <tr> element.

HTMLTableRowElement.insertCell() - Web APIs
the cell does not need to be appended separately with node.appendchild() as would be the case if document.createelement() had been used to create the new <td> element.

HTMLTableRowElement.rowIndex - Web APIs
<thead> <tr><th>item</th> <th>price</th></tr> </thead> <tbody> <tr><td>bananas</td> <td>$2</td></tr> <tr><td>oranges</td> <td>$8</td></tr> <tr><td>top sirloin</td> <td>$20</td></tr> </tbody> <tfoot> <tr><td>total</td> <td>$30</td></tr> </tfoot> </table> javascript let rows = document.queryselectorall('tr'); rows.foreach((row) => { let z = document.createelement("td"); z.textcontent = `(row #${row.rowindex})`; row.appendchild(z); }); result ...

Ajax navigation example - Web APIs
length; nidx < nlen; document.links[nidx++].onclick = processlink); } const /* customizable constants */ stargetid = "ajax-content", sviewkey = "view_as", sajaxclass = "ajax-nav", /* not customizable constants */ rsearch = /\?.*$/, rhost = /^[^\?]*\?*&*/, rview = new regexp("&" + sviewkey + "\\=[^&]*|&*$", "i"), rendqstmark = /\?$/, oloadingbox = document.createelement("div"), ocover = document.createelement("div"), oloadingimg = new image(), opageinfo = { title: null, url: location.href }, ohttpstatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { 100: "continue", 101: "switching protocols", 102: "processing", 200: "ok", 201: "...

IDBCursor.advance() - Web APIs
for a complete working example, see our idbcursor example (view example live.) function advanceresult() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); cursor.advance(2); } else { console.log('every other entry displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'advance()' in that specification.

IDBCursor.continue() - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'continue()' in that specification.

IDBCursor.delete() - Web APIs
even power windows is better.'); }; } else { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); } cursor.continue(); } else { console.log('entries displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'delete()' in that specification.

IDBCursor.direction - Web APIs
a complete working example, see our idbcursor example (view example live.) function backwards() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readonly'); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor(null,'prev').onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.direction); cursor.continue(); } else { console.log('entries displayed backwards.'); } }; }; specifications specification status comment indexed database api 2.0the defi...

IDBCursor.key - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.key); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'key' in that specification.

IDBCursor.primaryKey - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.primarykey); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'primarykey' in that specificat...

IDBCursor.request - Web APIs
for example: function displaydata() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readonly'); var objectstore = transaction.objectstore('rushalbumlist'); var request = objectstore.opencursor(); request.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.request); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api draftthe definition o...

IDBCursor.source - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.source); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'source' in that specification.

IDBCursor.update() - Web APIs
s = function(event) { const cursor = event.target.result; if (cursor) { if (cursor.value.albumtitle === 'a farewell to kings') { const updatedata = cursor.value; updatedata.year = 2050; const request = cursor.update(updatedata); request.onsuccess = function() { console.log('a better album year?'); }; }; const listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'update()' in that specification.

IDBCursor - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification status comment indexed database api 2.0the definition of 'cursor' in that specification.

IDBCursorWithValue.value - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.value); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'source' in that specification.

IDBCursorWithValue - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'idbcursorwithvalue' in that specification.

IDBIndex.count() - Web APIs
.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var countrequest = myindex.count(); countrequest.onsuccess = function() { console.log(countrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email ...

IDBIndex.get() - Web APIs
.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var getrequest = myindex.get('bungle'); getrequest.onsuccess = function() { console.log(getrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email ...

IDBIndex.getKey() - Web APIs
(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var getkeyrequest = myindex.getkey('bungle'); getkeyrequest.onsuccess = function() { console.log(getkeyrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email ...

IDBIndex.isAutoLocale - Web APIs
function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.isautolocale); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email ...

IDBIndex.keyPath - Web APIs
e.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.keypath); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email ...

IDBIndex.locale - Web APIs
function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.locale); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email ...

IDBIndex.multiEntry - Web APIs
function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.multientry); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email ...

IDBIndex.name - Web APIs
function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.name); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email ...

IDBIndex.objectStore - Web APIs
function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.objectstore); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email ...

IDBIndex.openCursor() - Web APIs
demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email ...

IDBIndex.openKeyCursor() - Web APIs
function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.openkeycursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.key + '</td>' + '<td>' + cursor.primarykey + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('all last names displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'openkeyc...

IDBIndex.unique - Web APIs
ve.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.unique); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email ...

IDBIndex - Web APIs
e demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email ...

IDBKeyRange.bound() - Web APIs
indexeddb-examples repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'bound()' in that specification.

IDBKeyRange.lower - Web APIs
oo.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.lower); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'lower' in that specification.

IDBKeyRange.lowerBound() - Web APIs
dbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.lowerbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'lowerbound()' in that specifi...

IDBKeyRange.lowerOpen - Web APIs
function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.loweropen); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'loweropen' in that specification...

IDBKeyRange.only() - Web APIs
look at our idbkeyrange repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.only("a"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'only' in that specification.

IDBKeyRange.upper - Web APIs
oo.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upper); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'upper' in that specification.

IDBKeyRange.upperBound() - Web APIs
dbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.upperbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'upperbound()' in that spec...

IDBKeyRange.upperOpen - Web APIs
function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upperopen); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'upperopen' in that specificat...

IDBKeyRange - Web APIs
ur idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification status comment indexed database api 2.0the definition of 'idbkeyrange' in that specification.

IDBLocaleAwareKeyRange - Web APIs
amples function displaydata() { var keyrangevalue = idblocaleawarekeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); var myindex = objectstore.index('lname'); myindex.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;' + '&lt;td&gt;' + cursor.value.lname + '&lt;/td&gt;' + '&lt;td&gt;' + cursor.value.fname + '&lt;/td&gt;' + '&lt;td&gt;' + cursor.value.jtitle + '&lt;/td&gt;' + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt...

IDBObjectStore.index() - Web APIs
e demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email ...

IIRFilterNode.getFrequencyResponse() - Web APIs
function calcfrequencyresponse() { iirfilter.getfrequencyresponse(myfrequencyarray, magresponseoutput, phaseresponseoutput); for(i = 0; i <= myfrequencyarray.length-1;i++){ var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + myfrequencyarray[i] + 'hz</strong>: magnitude ' + magresponseoutput[i] + ', phase ' + phaseresponseoutput[i] + ' radians.'; freqresponseoutput.appendchild(listitem); } } calcfrequencyresponse(); specifications specification status comment web audio apithe definition of 'getfrequencyresponse()' in that specification.

KeyboardEvent.code - Web APIs
html <p>press keys on the keyboard to see what the keyboardevent's key and code values are for each one.</p> <div id="output"> </div> css #output { font-family: arial, helvetica, sans-serif; border: 1px solid black; } javascript window.addeventlistener("keydown", function(event) { let str = "keyboardevent: key='" + event.key + "' | code='" + event.code + "'"; let el = document.createelement("span"); el.innerhtml = str + "<br/>"; document.getelementbyid("output").appendchild(el); }, true); try it out to ensure that keystrokes go to the sample, click in the output box below before pressing keys.

Location: host - Web APIs
syntax string = object.host; object.host = string; examples var anchor = document.createelement("a"); anchor.href = "https://developer.mozilla.org/location.host" anchor.host == "developer.mozilla.org" anchor.href = "https://developer.mozilla.org:443/location.host" anchor.host == "developer.mozilla.org" // the port number is not included because 443 is the scheme's default port anchor.href = "https://developer.mozilla.org:4097/location.host" anchor.host == "developer.mozilla.org:4097" specifications specification status comment html living standardthe definition of 'host' in that specification.

Location - Web APIs
examples // create anchor element and use href property for the purpose of this example // a more correct alternative is to browse to the url and use document.location or window.location var url = document.createelement('a'); url.href = 'https://developer.mozilla.org:8080/search?q=url#search-results-close-container'; console.log(url.href); // https://developer.mozilla.org:8080/search?q=url#search-results-close-container console.log(url.protocol); // https: console.log(url.host); // developer.mozilla.org:8080 console.log(url.hostname); // developer.mozilla.org console.log(url.port); // 8080 conso...

MediaDevices.getSupportedConstraints() - Web APIs
onstraints are supported by your browser:</p> <ul id="constraintlist"> </ul> css body { font: 15px arial, sans-serif; } javascript let constraintlist = document.getelementbyid("constraintlist"); let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); for (let constraint in supportedconstraints) { if (supportedconstraints.hasownproperty(constraint)) { let elem = document.createelement("li"); elem.innerhtml = "<code>" + constraint + "</code>"; constraintlist.appendchild(elem); } } result specifications specification status comment media capture and streamsthe definition of 'getsupportedconstraints()' in that specification.

MediaDevices.ondevicechange - Web APIs
function updatedevicelist() { navigator.mediadevices.enumeratedevices() .then(function(devices) { audiolist.innerhtml = ""; videolist.innerhtml = ""; devices.foreach(function(device) { let elem = document.createelement("li"); let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i); elem.innerhtml = "<strong>" + device.label + "</strong> (" + direction + ")"; if (type === "audio") { audiolist.appendchild(elem); } else if (type === "video") { videolist.appendchild(elem); } }); }); } updatedevicelist() consists entirely of a call to the function...

MediaElementAudioSourceNode() - Web APIs
example var ac = new audiocontext(); var mediaelement = document.createelement('audio'); var options = { mediaelement : mediaelement } var myaudiosource = new mediaelementaudiosourcenode(ac, options); specifications specification status comment web audio apithe definition of 'mediaelementaudiosourcenode' in that specification.

MediaError.code - Web APIs
the error handler simply outputs a message var obj = document.createelement('video'); obj.onerror = function() {console.log("error with media: " + obj.error.code);} obj.src="https://example.com/blahblah.mp4"; specifications specification status comment html living standardthe definition of 'mediaerror.code' in that specification.

MediaRecorder.ondataavailable - Web APIs
var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ...

MediaRecorder.onstop - Web APIs
mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ...

MediaRecorder - Web APIs
function() { mediarecorder.stop(); console.log(mediarecorder.state); console.log("recorder stopped"); record.style.background = ""; record.style.color = ""; } mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var clipname = prompt('enter a name for your sound clip'); var clipcontainer = document.createelement('article'); var cliplabel = document.createelement('p'); var audio = document.createelement('audio'); var deletebutton = document.createelement('button'); clipcontainer.classlist.add('clip'); audio.setattribute('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; clipcontainer.appendchild(audio); clipcontainer.

MediaStream.onaddtrack - Web APIs
stream.onaddtrack = function(event) { let tracklist = document.getelementbyid("tracks"); let label = document.createelement("li"); label.innerhtml = event.track.kind + ": " + event.track.label; tracklist.appendchild(label); }; specifications specification status comment media capture and streamsthe definition of 'mediastream.onaddtrack' in that specification.

MediaStream.onremovetrack - Web APIs
stream.onremovetrack = function(event) { let tracklist = document.getelementbyid("tracks"); let label = document.createelement("li"); label.innerhtml = "removed: " + event.track.kind + ": " + event.track.label; tracklist.appendchild(label); }; specifications specification status comment media capture and streamsthe definition of 'mediastream.onremovetrack' in that specification.

Using the MediaStream Recording API - Web APIs
we register an event handler for this using mediarecorder.onstop, and finalize our blob there from all the chunks we have received: mediarecorder.onstop = function(e) { console.log("recorder stopped"); const clipname = prompt('enter a name for your sound clip'); const clipcontainer = document.createelement('article'); const cliplabel = document.createelement('p'); const audio = document.createelement('audio'); const deletebutton = document.createelement('button'); clipcontainer.classlist.add('clip'); audio.setattribute('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; clipcontainer.appendchild(audio); clipcontainer.appendchild(cliplabel); clip...

Capabilities, constraints, and settings - Web APIs
let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); for (let constraint in supportedconstraints) { if (supportedconstraints.hasownproperty(constraint)) { let elem = document.createelement("li"); elem.innerhtml = "<code><a href='/docs/web/api/mediatracksupportedconstraints/" .concat(constraint) + "' target='_blank'>" + constraint + "</a></code>"; supportedconstraintlist.appendchild(elem); } } error handling we also have some simple error handling code; handleerror() is called to handle promises which fail, and the log() function appends the error message to a ...

Microdata DOM API - Web APIs
var outer = document.createelement('ul'); var items = document.getitems(); for (var item = 0; item < items.length; item += 1) { var itemli = document.createelement('li'); var inner = document.createelement('ul'); for (var name = 0; name < items[item].properties.names.length; name += 1) { var propli = document.createelement('li'); propli.appendchild(document.createtextnode(items[item].properties.names[name])); inn...

MimeTypeArray - Web APIs
var mimetypes = navigator.mimetype; var flashplugin = mimetypes['video/x-flv']; if (typeof flashplugin === "undefined") { var vid = document.createelement('video'); // use vid.canplaytype() to test for a supported mime type.

msPlayToPreferredSourceUri - Web APIs
example <video src="http://www.contoso.com/videos/video.mp4" msplaytopreferredsourceuri="http://www.contoso.com/catalogid=1234" /> var video = document.createelement('video'); document.body.appendchild(video); video.src = "http://www.contoso.com/videos/video.mp4"; video.msplaytopreferredsourceuri = "http://www.contoso.com/catalogid=1234"; see also microsoft playready content access and protection technology is a set of technologies that can be used to distribute audio/video content more securely over a network, and help prevent the unauthorized us...

Node.isConnected - Web APIs
examples standard dom a standard dom example: let test = document.createelement('p'); console.log(test.isconnected); // returns false document.body.appendchild(test); console.log(test.isconnected); // returns true shadow dom a shadow dom example: // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create some css to apply to the shadow dom var style = document.createelement('style'); console.log(style.isconnected); // returns false style.textcont...

Node.namespaceURI - Web APIs
you can create an element with the specified namespaceuri using the dom level 2 method document.createelementns and attributes with the method element.setattributens.

Node.nodeType - Web APIs
examples different types of nodes document.nodetype === node.document_node; // true document.doctype.nodetype === node.document_type_node; // true document.createdocumentfragment().nodetype === node.document_fragment_node; // true var p = document.createelement("p"); p.textcontent = "once upon a time…"; p.nodetype === node.element_node; // true p.firstchild.nodetype === node.text_node; // true comments this example checks if the first node inside the document element is a comment, and displays a message if not.

Node.normalize() - Web APIs
syntax element.normalize(); example let wrapper = document.createelement("div"); wrapper.appendchild( document.createtextnode("part 1 ") ); wrapper.appendchild( document.createtextnode("part 2 ") ); // at this point, wrapper.childnodes.length === 2 // wrapper.childnodes[0].textcontent === "part 1 " // wrapper.childnodes[1].textcontent === "part 2 " wrapper.normalize(); // now, wrapper.childnodes.length === 1 // wrapper.childnodes[0].textcontent === "part 1 part 2 " specifications specification status comment domthe definition of 'node: normalize' in that specification.

Node.replaceChild() - Web APIs
example // given: // <div> // <span id="childspan">foo bar</span> // </div> // create an empty element node // without an id, any attributes, or any content var sp1 = document.createelement("span"); // give it an id attribute called 'newspan' sp1.id = "newspan"; // create some content for the new element.

NodeList.entries() - Web APIs
example var node = document.createelement("div"); var kid1 = document.createelement("p"); var kid2 = document.createtextnode("hey"); var kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); var list = node.childnodes; // using for..of for(var entry of list.entries()) { console.log(entry); } results in: array [ 0, <p> ] array [ 1, #text "hey" ] array [ 2, <span> ] ...

NodeList.prototype.forEach() - Web APIs
example let node = document.createelement("div"); let kid1 = document.createelement("p"); let kid2 = document.createtextnode("hey"); let kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); let list = node.childnodes; list.foreach( function(currentvalue, currentindex, listobj) { console.log(currentvalue + ', ' + currentindex + ', ' + this); }, 'mythisarg' ); the abov...

NodeList.keys() - Web APIs
example var node = document.createelement("div"); var kid1 = document.createelement("p"); var kid2 = document.createtextnode("hey"); var kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); var list = node.childnodes; // using for..of for(var key of list.keys()) { console.log(key); } the result is: 0 1 2 ...

NodeList.values() - Web APIs
example var node = document.createelement("div"); var kid1 = document.createelement("p"); var kid2 = document.createtextnode("hey"); var kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); var list = node.childnodes; // using for..of for(var value of list.values()) { console.log(value); } the result is: <p> #text "hey" <span> ...

NodeList - Web APIs
for example, node.childnodes is live: const parent = document.getelementbyid('parent'); let child_nodes = parent.childnodes; console.log(child_nodes.length); // let's assume "2" parent.appendchild(document.createelement('div')); console.log(child_nodes.length); // outputs "3" static nodelists in other cases, the nodelist is static, where any changes in the dom does not affect the content of the collection.

OVR_multiview2 - Web APIs
const gl = document.createelement('canvas').getcontext( 'webgl2', { antialias: false } ); const ext = gl.getextension('ovr_multiview2'); const fb = gl.createframebuffer(); gl.bindframebuffer(gl.draw_framebuffer, fb); const colortex = gl.createtexture(); gl.bindtexture(gl.texture_2d_array, colortex); gl.texstorage3d(gl.texture_2d_array, 1, gl.rgba8, 512, 512, 2); ext.framebuffertexturemultiviewovr(gl.draw_framebuffer, gl.color_at...

RTCDataChannel.onmessage - Web APIs
let pc = new rtcpeerconnection(); let dc = pc.createdatachannel(); dc.onmessage = function(event) { var el = document.createelement("p"); var txtnode = document.createtextnode(event.data); el.appendchild(txtnode); receivebox.appendchild(el); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.onmessage' in that specification.

Range.insertNode() - Web APIs
example range = document.createrange(); newnode = document.createelement("p"); newnode.appendchild(document.createtextnode("new node inserted here")); range.selectnode(document.getelementsbytagname("div").item(0)); range.insertnode(newnode); specifications specification status comment domthe definition of 'range.insertnode()' in that specification.

Range.surroundContents() - Web APIs
example html <span class="header-text">put this in a headline</span> javascript const range = document.createrange(); const newparent = document.createelement('h1'); range.selectnode(document.queryselector('.header-text')); range.surroundcontents(newparent); result specifications specification status comment domthe definition of 'range.surroundcontents()' in that specification.

ReadableStream.ReadableStream() - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop gener...

ReadableStream.getReader() - Web APIs
if (done) { console.log("stream complete"); para.textcontent = value; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.

ReadableStream.tee() - Web APIs
if (done) { console.log("stream complete"); return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'read ' + charsreceived + ' characters so far.

ReadableStreamDefaultController.close() - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop gener...

ReadableStreamDefaultController.enqueue() - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop gener...

ReadableStreamDefaultController - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop gener...

ReadableStreamDefaultReader.ReadableStreamDefaultReader() - Web APIs
if (done) { console.log("stream complete"); para.textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.

ReadableStreamDefaultReader.cancel() - Web APIs
if (done) { console.log("stream complete"); reader.cancel(); para.textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.

ReadableStreamDefaultReader.read() - Web APIs
if (done) { console.log("stream complete"); para.textcontent = result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.

SVGAnimationElement: beginEvent event - Web APIs
300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10px 30px; } let svgelem = document.queryselector('svg'); let animateelem = document.queryselector('animatemotion'); let list = document.queryselector('ul'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('repeatevent', (e) => { let listitem = document.createelement('li'); let msg = 'repeatevent fired'; if(e.detail) { msg += '; repeat number: ' + e.detail; } listitem.textcontent = msg; list.appendchild(listitem); }) event handler property equivalent note that you ...

SVGAnimationElement: endEvent event - Web APIs
<button>stop animation</button> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10px 30px; } let svgelem = document.queryselector('svg'); let animateelem = document.queryselector('animatemotion'); let list = document.queryselector('ul'); let btn = document.queryselector('button'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('endevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'endevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('repeatevent', (e) => { let listitem = document.createelement('li'); let msg = 'repeatevent fired'; if(e.

SVGAnimationElement: repeatEvent event - Web APIs
300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10px 30px; } let svgelem = document.queryselector('svg'); let animateelem = document.queryselector('animatemotion'); let list = document.queryselector('ul'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('repeatevent', (e) => { let listitem = document.createelement('li'); let msg = 'repeatevent fired'; if(e.detail) { msg += '; repeat number: ' + e.detail; } listitem.textcontent = msg; list.appendchild(listitem); }) event handler property equivalent note that you ...

SpeechSynthesis.getVoices() - Web APIs
example javascript function populatevoicelist() { if(typeof speechsynthesis === 'undefined') { return; } var voices = speechsynthesis.getvoices(); for(var i = 0; i < voices.length; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); document.getelementbyid("voiceselect").appendchild(option); } } populatevoicelist(); if (typeof speechsynthesis !== 'undefi...

SpeechSynthesis.onvoiceschanged - Web APIs
var voices = []; function populatevoicelist() { voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynt...

SpeechSynthesis - Web APIs
txt'); var voiceselect = document.queryselector('select'); var pitch = document.queryselector('#pitch'); var pitchvalue = document.queryselector('.pitch-value'); var rate = document.queryselector('#rate'); var ratevalue = document.queryselector('.rate-value'); var voices = []; function populatevoicelist() { voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynt...

SpeechSynthesisUtterance - Web APIs
var synth = window.speechsynthesis; var voices = synth.getvoices(); var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); for(var i = 0; i < voices.length; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.value = i; voiceselect.appendchild(option); } inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); utterthis.voice = voices[voiceselect.value]; synth.speak(utterthis); inputtxt.blur(); } specifications specificati...

SpeechSynthesisVoice.default - Web APIs
examples for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } specifications specification status comment web speech apithe definition of 'de...

SpeechSynthesisVoice.lang - Web APIs
examples for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } specifications specification status comment web speech apithe definition of 'lang' in that specification.

SpeechSynthesisVoice.localService - Web APIs
examples for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } console.log(voices[i].localservice); option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } specifications specification status comment ...

SpeechSynthesisVoice.name - Web APIs
examples for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } specifications specification status comment web speech apithe definition of 'name' in that specification.

SpeechSynthesisVoice.voiceURI - Web APIs
examples for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } console.log(voices[i].voiceuri); // on mac, this returns urns, for example 'urn:moz-tts:osx:com.apple.speech.synthesis.voice.daniel' option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); vo...

SpeechSynthesisVoice - Web APIs
function populatevoicelist() { voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynt...

Using writable streams - Web APIs
queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); the writ...

StylePropertyMapReadOnly.get() - Web APIs
document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const stylemap = myelement.computedstylemap(); // array of properties we're interested in const ofinterest = ['font-weight', 'border-left-color', 'color', '--colour']; // iterate thru our properties of interest for ( let i = 0; i < ofinterest.length; i++ ) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(ofinterest[i])); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode( stylemap.get(ofinterest[i]))); styleslist.appendchild(cssvalue); } specifications specification status comment css typed om level 1the definition...

StylePropertyMapReadOnly - Web APIs
ent.queryselector('p'); // get the <dl> we'll be populating const styleslist = document.queryselector('#output'); // retrieve all computed styles with computedstylemap() const stylepropertymap = myelement.computedstylemap(); // iterate thru the map of all the properties and values, adding a <dt> and <dd> for each for (const [prop, val] of stylepropertymap) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(prop)); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode(val)); styleslist.appendchild(cssvalue); } specifications specification status comment css typed om level 1the definition of 'stylepropertymapreadonly' in that sp...

Text.splitText() - Web APIs
html <p>foobar</p> javascript const p = document.queryselector('p'); // get contents of <p> as a text node const foobar = p.firstchild; // split 'foobar' into two text nodes, 'foo' and 'bar', // and save 'bar' as a const const bar = foobar.splittext(3); // create a <u> element containing ' new content ' const u = document.createelement('u'); u.appendchild(document.createtextnode(' new content ')); // add <u> before 'bar' p.insertbefore(u, bar); // the result is: <p>foo<u> new content </u>bar</p> result specifications specification status comment domthe definition of 'text.splittext' in that specification.

TextMetrics.actualBoundingBoxAscent - Web APIs
examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.actualboundingboxascent; // 8; specifications specification html living standardthe definition of 'textmetrics.actualboundingboxascent' in that specification.

TextMetrics.actualBoundingBoxDescent - Web APIs
examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.actualboundingboxdescent; // 0; specifications specification html living standardthe definition of 'textmetrics.actualboundingboxdescent' in that specification.

TextMetrics.actualBoundingBoxLeft - Web APIs
examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.actualboundingboxleft; // 0; specifications specification html living standardthe definition of 'textmetrics.actualboundingboxleft' in that specification.

TextMetrics.actualBoundingBoxRight - Web APIs
examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.actualboundingboxright; // 15.633333333333333; specifications specification html living standardthe definition of 'textmetrics.actualboundingboxright' in that specification.

TextMetrics.alphabeticBaseline - Web APIs
examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.alphabeticbaseline; // -0; specifications specification html living standardthe definition of 'textmetrics.alphabeticbaseline' in that specification.

TextMetrics.emHeightAscent - Web APIs
examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.emheightascent; // 7.59765625; specifications specification html living standardthe definition of 'textmetrics.emheightascent' in that specification.

TextMetrics.emHeightDescent - Web APIs
examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.emheightdescent; // -2.40234375; specifications specification html living standardthe definition of 'textmetrics.emheightdescent' in that specification.

TextMetrics.fontBoundingBoxAscent - Web APIs
examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.fontboundingboxascent; // 10; specifications specification html living standardthe definition of 'textmetrics.fontboundingboxascent' in that specification.

TextMetrics.fontBoundingBoxDescent - Web APIs
examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.fontboundingboxdescent; // 3; specifications specification html living standardthe definition of 'textmetrics.fontboundingboxdescent' in that specification.

TextMetrics.hangingBaseline - Web APIs
examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.hangingbaseline; // 6.078125; specifications specification html living standardthe definition of 'textmetrics.hangingbaseline' in that specification.

TextMetrics.ideographicBaseline - Web APIs
examples const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const text = ctx.measuretext('foo'); // returns textmetrics object text.ideographicbaseline; // -1.201171875; specifications specification html living standardthe definition of 'textmetrics.ideographicbaseline' in that specification.

URL API - Web APIs
function filltablewithparameters(tbl) { let url = new url(document.location.href); url.searchparams.sort(); let keys = url.searchparams.keys(); for (let key of keys) { let val = url.searchparams.get(key); let row = document.createelement("tr"); let cell = document.createelement("td"); cell.innertext = key; row.appendchild(cell); cell = document.createelement("td"); cell.innertext = val; row.appendchild(cell); tbl.appendchild(row); }; } a working version of this example can be found on glitch.

WebGLRenderingContext.commit() - Web APIs
syntax void webglrenderingcontext.commit() examples var htmlcanvas = document.createelement('canvas'); var offscreen = htmlcanvas.transfercontroltooffscreen(); var gl = offscreen.getcontext('webgl'); // ...

Detect WebGL - Web APIs
var canvas = document.createelement("canvas"); // get webglrenderingcontext from canvas element.

Animating textures in WebGL - Web APIs
getting access to the video the first step is to create the <video> element that we'll use to retrieve the video frames: // will set to true when video can be copied to texture var copyvideo = false; function setupvideo(url) { const video = document.createelement('video'); var playing = false; var timeupdate = false; video.autoplay = true; video.muted = true; video.loop = true; // waiting for these 2 events ensures // there is data in the video video.addeventlistener('playing', function() { playing = true; checkready(); }, true); video.addeventlistener('timeupdate', function() { timeupdate = true; checkready();...

Signaling and video calling - Web APIs
function handleuserlistmsg(msg) { var i; var listelem = document.queryselector(".userlistbox"); while (listelem.firstchild) { listelem.removechild(listelem.firstchild); } msg.users.foreach(function(username) { var item = document.createelement("li"); item.appendchild(document.createtextnode(username)); item.addeventlistener("click", invite, false); listelem.appendchild(item); }); } after getting a reference to the <ul> which contains the list of user names into the variable listelem, we empty the list by removing each of its child elements.

A simple RTCDataChannel sample - Web APIs
function handlereceivemessage(event) { var el = document.createelement("p"); var txtnode = document.createtextnode(event.data); el.appendchild(txtnode); receivebox.appendchild(el); } this method simply performs some basic dom injection; it creates a new <p> (paragraph) element, then creates a new text node containing the message text, which is received in the event's data property.

Using IIR filters - Web APIs
// create a canvas element and append it to our dom const canvascontainer = document.queryselector('.filter-graph'); const canvasel = document.createelement('canvas'); canvascontainer.appendchild(canvasel); // set 2d context and set dimesions const canvasctx = canvasel.getcontext('2d'); const width = canvascontainer.offsetwidth; const height = canvascontainer.offsetheight; canvasel.width = width; canvasel.height = height; // set background fill canvasctx.fillstyle = 'white'; canvasctx.fillrect(0, 0, width, height); // set up some spacing based on ...

Using the Web Speech API - Web APIs
function populatevoicelist() { voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } when we come to run the function, we do the following.

Using Web Workers - Web APIs
var ofragm = document.createdocumentfragment(); ofragm.appendchild(document.createtextnode(smsg)); ofragm.appendchild(document.createelement('br')); document.queryselector('#logdisplay').appendchild(ofragm); } </script> <script type="text/js-worker"> // this script won't be parsed by js engines because its mime type is text/js-worker.

Window.speechSynthesis - Web APIs
var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); function populatevoicelist() { voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynt...

WritableStream.WritableStream() - Web APIs
queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessag...

WritableStream.getWriter() - Web APIs
queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessag...

WritableStream - Web APIs
queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessag...

WritableStreamDefaultWriter.WritableStreamDefaultWriter() - Web APIs
queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessag...

WritableStreamDefaultWriter.close() - Web APIs
queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessag...

WritableStreamDefaultWriter.write() - Web APIs
queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessag...

WritableStreamDefaultWriter - Web APIs
rategy = new countqueuingstrategy({ highwatermark: 1 }); let result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " + decoded; list.appendchild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrateg...

XMLSerializer - Web APIs
var inp = document.createelement('input'); var xmls = new xmlserializer(); var inp_xmls = xmls.serializetostring(inp); // first convert dom node into a string // insert the newly created node into the document's body document.body.insertadjacenthtml('afterbegin', inp_xmls); the code creates a new <input> element by calling document.createelement(), then serializes it into xml using serializetostring().

XRSession.updateRenderState() - Web APIs
function onxrsessionstarted(xrsession) { let glcanvas = document.createelement("canvas"); let gl = glcanvas.getcontext("webgl", { xrcompatible: true }); loadwebglresources(); xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl) }); } specifications specification status comment webxr device apithe definition of 'xrsession.updaterenderstate()' in that specification.

Using the alert role - Accessibility
let myalert = document.createelement("p"); myalert.setattribute("role", "alert"); let myalerttext = document.createtextnode("you must agree with our terms of service to create an account."); myalert.appendchild(myalerttext); document.body.appendchild(myalert); note: the same result can be achieved with less code when using a script library like jquery: $("<p role='alert'>you must agree with our terms of service to create an accou...

Using the aria-invalid attribute - Accessibility
updatealert(amsg); } else { elem.setattribute("aria-invalid", "false"); updatealert(); } } the snippet below shows the alert functions, which add (or remove) the error message: function updatealert(msg) { var oldalert = document.getelementbyid("alert"); if (oldalert) { document.body.removechild(oldalert); } if (msg) { var newalert = document.createelement("div"); newalert.setattribute("role", "alert"); newalert.setattribute("id", "alert"); var content = document.createtextnode(msg); newalert.appendchild(content); document.body.appendchild(newalert); } } note that the alert has the aria role attribute set to "alert." working examples: alert role example (uses the aria-invalid attribute) notes whe...

ARIA: button role - Accessibility
if(name.length > 0) { listitem = document.createelement('li'); listitem.appendchild(document.createtextnode(name)); // add the new name to the list.

Alerts - Accessibility
below is example javascript code which could be inserted above the closing “head” tag: <script type="application/javascript"> function removeoldalert() { var oldalert = document.getelementbyid("alert"); if (oldalert){ document.body.removechild(oldalert); } } function addalert(amsg) { removeoldalert(); var newalert = document.createelement("div"); newalert.setattribute("role", "alert"); newalert.setattribute("id", "alert"); var msg = document.createtextnode(amsg); newalert.appendchild(msg); document.body.appendchild(newalert); } function checkvalidity(aid, asearchterm, amsg) { var elem = document.getelementbyid(aid); var invalid = (elem.value.indexof(asearchterm) < 0); if (invalid) { elem.setattribu...

::slotted() - CSS: Cascading Style Sheets
ot></li> </ul> </div> </template> a custom element — <person-details> — is defined like so: customelements.define('person-details', class extends htmlelement { constructor() { super(); let template = document.getelementbyid('person-template'); let templatecontent = template.content; const shadowroot = this.attachshadow({mode: 'open'}); let style = document.createelement('style'); style.textcontent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' + 'h2 { margin: 0 0 10px; }' + 'ul { margin: 0; }' + 'p { margin: 10px 0; }' + '::slotted(*) { color: gray; font-family: sans-serif; } '; shadowroot.appendchild(style); ...

:defined - CSS: Cascading Style Sheets
in this demo we define a very simple trivial custom element: customelements.define('simple-custom', class extends htmlelement { constructor() { super(); let divelem = document.createelement('div'); divelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(divelem); } }) then insert a copy of this element into the document, along with a standard <p>: <simple-custom text="custom element example text"></simple-custom> <p>standard paragraph example text</p> in the css we first include the following rules: ...

:host() - CSS: Cascading Style Sheets
in this example we have a simple custom element — <context-span> — that you can wrap around text: <h1>host selectors <a href="#"><context-span>example</context-span></a></h1> inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some css rules: let style = document.createelement('style'); let span = document.createelement('span'); span.textcontent = this.textcontent; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " -...

:host-context() - CSS: Cascading Style Sheets
in this example we have a simple custom element — <context-span> — that you can wrap around text: <h1>host selectors <a href="#"><context-span>example</context-span></a></h1> inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some css rules: let style = document.createelement('style'); let span = document.createelement('span'); span.textcontent = this.textcontent; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " -...

:host - CSS: Cascading Style Sheets
in this example we have a simple custom element — <context-span> — that you can wrap around text: <h1>host selectors <a href="#"><context-span>example</context-span></a></h1> inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some css rules: let style = document.createelement('style'); let span = document.createelement('span'); span.textcontent = this.textcontent; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " -...

Using CSS animations - CSS: Cascading Style Sheets
function listener(event) { var l = document.createelement("li"); switch(event.type) { case "animationstart": l.innerhtml = "started: elapsed time is " + event.elapsedtime; break; case "animationend": l.innerhtml = "ended: elapsed time is " + event.elapsedtime; break; case "animationiteration": l.innerhtml = "new loop started at time " + event.elapsedtime; break; } document.getelementbyid("output").ap...

<color> - CSS: Cascading Style Sheets
<input type="text" id="color"> css div { width: 100%; height: 200px; } javascript const inputelem = document.queryselector('input'); const divelem = document.queryselector('div'); function validtextcolor(stringtotest) { if (stringtotest === "") { return false; } if (stringtotest === "inherit") { return false; } if (stringtotest === "transparent") { return false; } const image = document.createelement("img"); image.style.color = "rgb(0, 0, 0)"; image.style.color = stringtotest; if (image.style.color !== "rgb(0, 0, 0)") { return true; } image.style.color = "rgb(255, 255, 255)"; image.style.color = stringtotest; return image.style.color !== "rgb(255, 255, 255)"; } inputelem.addeventlistener('change', () => { if(validtextcolor(inputelem.value)) { divelem.style.backgroundcolor =...

font - CSS: Cascading Style Sheets
ut_" + radio_name, curelem = document.getelementbyid(curelemname); curelem.value = oradio[i].value; return oradio[i].value; } } } setcss = function () { getproperties(); injectcss(shorttext); } injectcss = function(cssfragment) { old = document.body.getelementsbytagname("style"); if (old.length > 1) { old[1].parentelement.removechild(old[1]); } css = document.createelement("style"); css.innerhtml = ".fontshorthand{font: " + cssfragment + "}"; document.body.appendchild(css); } setcss(); specifications specification status comment css fonts module level 3the definition of 'font' in that specification.

<length> - CSS: Cascading Style Sheets
display: flex; justify-content: flex-start; align-items: center; height: 50px; } label { margin: 0 10px 0 20px; } javascript const inputdiv = document.queryselector('.inner'); const inputelem = document.queryselector('input'); const resultsdiv = document.queryselector('.results'); inputelem.addeventlistener('change', () => { inputdiv.style.width = inputelem.value; const result = document.createelement('div'); result.classname = 'result'; result.style.width = inputelem.value; result.innerhtml = `<code>width: ${inputelem.value}</code>`; resultsdiv.appendchild(result); inputelem.value = ''; inputelem.focus(); }) result specifications specification status comment css values and units module level 4the definition of '<length>' in that specification.

Cross-browser audio basics - Developer guides
here's an example of creating an <audio> element, setting the media to play, playing and pausing, and then playing from 5 seconds into the audio: var myaudio = document.createelement('audio'); if (myaudio.canplaytype('audio/mpeg')) { myaudio.setattribute('src','audiofile.mp3'); } if (myaudio.canplaytype('audio/ogg')) { myaudio.setattribute('src','audiofile.ogg'); } alert('play'); myaudio.play(); alert('stop'); myaudio.pause(); alert('play from 5 seconds in'); myaudio.currenttime = 5; myaudio.play(); let's explore the available properties and methods in more detai...

Video player styling basics - Developer guides
first change is simple: the data-state for showing the video controls when javascript is available to the browser now needs to be set: // display the user defined video controls videocontrols.setattribute('data-state', 'visible'); progress bar support a check also needs to be made to set up the "fake" progress bar if the browser doesn't support the <progress> element: var supportsprogress = (document.createelement('progress').max !== undefined); if (!supportsprogress) progress.setattribute('data-state', 'fake'); button functionality this section looks at the javascript required for implementing the button functionality.

Web Audio playbackRate explained - Developer guides
playbackrate basics let's starting by looking at a brief example of playbackrate usage: var myaudio = document.createelement('audio'); myaudio.setattribute('src','audiofile.mp3'); myaudio.playbackrate = 0.5; here we create an <audio> element, and set its src to a file of our choice.

Rich-Text Editing in Mozilla - Developer guides
idatemode()) { document.execcommand(scmd, false, svalue); odoc.focus(); } } function validatemode() { if (!document.compform.switchmode.checked) { return true ; } alert("uncheck \"show html\"."); odoc.focus(); return false; } function setdocmode(btosource) { var ocontent; if (btosource) { ocontent = document.createtextnode(odoc.innerhtml); odoc.innerhtml = ""; var opre = document.createelement("pre"); odoc.contenteditable = false; opre.id = "sourcetext"; opre.contenteditable = true; opre.appendchild(ocontent); odoc.appendchild(opre); } else { if (document.all) { odoc.innerhtml = odoc.innertext; } else { ocontent = document.createrange(); ocontent.selectnodecontents(odoc.firstchild); odoc.innerhtml = ocontent.tostring(); } od...

Making content editable - Developer guides
idatemode()) { document.execcommand(scmd, false, svalue); odoc.focus(); } } function validatemode() { if (!document.compform.switchmode.checked) { return true ; } alert("uncheck \"show html\"."); odoc.focus(); return false; } function setdocmode(btosource) { var ocontent; if (btosource) { ocontent = document.createtextnode(odoc.innerhtml); odoc.innerhtml = ""; var opre = document.createelement("pre"); odoc.contenteditable = false; opre.id = "sourcetext"; opre.contenteditable = true; opre.appendchild(ocontent); odoc.appendchild(opre); document.execcommand("defaultparagraphseparator", false, "div"); } else { if (document.all) { odoc.innerhtml = odoc.innertext; } else { ocontent = document.createrange(); ocontent.selectnodecontents(odoc.

HTML5 Parser - Developer guides
some contexts from which you should not call document.write() include: scripts created using document.createelement() event handlers settimeout() setinterval() <script async src="..."> <script defer src="..."> if you use the same mechanism for loading script libraries for all browsers including ie, then your code probably will not be affected by this change.

Printing - Developer guides
cript type="text/javascript"> function closeprint () { document.body.removechild(this.__container__); } function setprint () { this.contentwindow.__container__ = this; this.contentwindow.onbeforeunload = closeprint; this.contentwindow.onafterprint = closeprint; this.contentwindow.focus(); // required for ie this.contentwindow.print(); } function printpage (surl) { var ohiddframe = document.createelement("iframe"); ohiddframe.onload = setprint; ohiddframe.style.position = "fixed"; ohiddframe.style.right = "0"; ohiddframe.style.bottom = "0"; ohiddframe.style.width = "0"; ohiddframe.style.height = "0"; ohiddframe.style.border = "0"; ohiddframe.src = surl; document.body.appendchild(ohiddframe); } </script> </head> <body> <p><span onclick="printpage('externalpage.html');" style="...

Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
receiving and saving the image the code that handles the newly-downloaded image is found in the imagereceived() method: function imagereceived() { let canvas = document.createelement("canvas"); let context = canvas.getcontext("2d"); canvas.width = downloadedimg.width; canvas.height = downloadedimg.height; context.drawimage(downloadedimg, 0, 0); imagebox.appendchild(canvas); try { localstorage.setitem("saved-image-example", canvas.todataurl("image/png")); } catch(err) { console.log("error: " + err); } } imagereceived() is called to handle the "loa...

<template>: The Content Template element - HTML: Hypertext Markup Language
if ('content' in document.createelement('template')) { // instantiate the table with the existing html tbody // and the row with the template var tbody = document.queryselector("tbody"); var template = document.queryselector('#productrow'); // clone the new row and insert it into the table var clone = template.content.clonenode(true); var td = clone.queryselectorall("td"); td[0].textcontent = "12356465...

Memory Management - JavaScript
var d = new date(); // allocates a date object var e = document.createelement('div'); // allocates a dom element some methods allocate new values or objects: var s = 'azerty'; var s2 = s.substr(0, 3); // s2 is a new string // since strings are immutable values, // javascript may decide to not allocate memory, // but just store the [0, 3] range.

Array.isArray() - JavaScript
var iframe = document.createelement('iframe'); document.body.appendchild(iframe); xarray = window.frames[window.frames.length-1].array; var arr = new xarray(1,2,3); // [1,2,3] // correctly checking for array array.isarray(arr); // true // considered harmful, because doesn't work through iframes arr instanceof array; // false specifications specification ecmascript (ecma-262)the definition of 'array.isarray' i...

Promise.any() - JavaScript
status: ${response.status}`); } else { return response.blob(); } }) } let coffee = fetchanddecode('coffee.jpg'); let tea = fetchanddecode('tea.jpg'); promise.any([coffee, tea]).then(value => { let objecturl = url.createobjecturl(value); let image = document.createelement('img'); image.src = objecturl; document.body.appendchild(image); }) .catch(e => { console.log(e.message); }); specifications specification promise.any ...

Symbol.toStringTag - JavaScript
for example, to acccess the symbol.tostringtag property on htmlbuttonelement: let test = document.createelement('button'); test.tostring(); // returns [object htmlbuttonelement] test[symbol.tostringtag]; // returns htmlbuttonelement specifications specification ecmascript (ecma-262)the definition of 'symbol.tostringtag' in that specification.

Property accessors - JavaScript
document.createelement('pre') if you use a method for a numeric literal, and the numeric literal has no exponent and no decimal point, you should leave white-space(s) before the dot preceding the method call, so that the dot is not interpreted as a decimal point.

Authoring MathML - MathML
for example the following function verifies the mathml support by testing the mspace element (you may replace mspace with mpadded): function hasmathmlsupport() { var div = document.createelement("div"), box; div.innerhtml = "<math><mspace height='23px' width='77px'/></math>"; document.body.appendchild(div); box = div.firstchild.firstchild.getboundingclientrect(); document.body.removechild(div); return math.abs(box.height - 23) <= 1 && math.abs(box.width - 77) <= 1; } alternatively, the following ua string sniffing will allow to detect the rendering engines with native mathml ...

Example - SVG: Scalable Vector Graphics
if( this.elt === null ) { var svg = 'http://www.w3.org/2000/svg'; this.elt = document.createelementns(svg,'line'); this.elt.setattributens(null,'stroke','green'); this.elt.setattributens(null,'stroke-width','3'); this.elt.setattributens(null,'stroke-opacity','0.5'); display().appendchild( this.elt ); } this.elt.setattributens(null,'x1',old_x); this.elt.setattributens(null,'y1',old_y); this.elt.setattributens(null,'x2',this.x); this.elt.setattributens(null,'y2',t...

Scripting - SVG: Scalable Vector Graphics
function myrect(x,y,w,h,message){ this.message=message this.rect=document.createelementns("http://www.w3.org/2000/svg","rect") this.rect.setattributens(null,"x",x) this.rect.setattributens(null,"y",y) this.rect.setattributens(null,"width",w) this.rect.setattributens(null,"height",h) document.documentelement.appendchild(this.rect) this.rect.addeventlistener("click",this,false) this.handleevent= function(evt){ switch (evt.type){ case "click": alert(this.message)...

SVG In HTML Introduction - SVG: Scalable Vector Graphics
like in the following example: var img = document.createelementns("http://www.w3.org/2000/svg", "image"); img.setattributens("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); details the viewbox attribute establishes a logical coordinate system which the svg picture's coordinates are relative to.

Web Components
the "is" option of the document.createelement() method: allows you to create an instance of a standard html element that behaves like a given registered custom built-in element.