Widget Specs Presentation example

basic-widget.html

// if you are from Austin JavaScript meetup,
// you can download presentation at http://bit.ly/widget_specs

<script src="http://awsmsite.com/widget.js?acnt=2800000&poll=1">
/*
  NOTE: ^^^ putting script tag here to make it easier to visualize
  that code is being executed inside of a script node
*/

// create iframe
var ifr = document.createElement('iframe');
ifr.src = 'http://awsmsite.com/widget?acnt=2800000&poll=1';

// create DOM node
var div = document.createElement('div');
div.innerHTML = '...this is awesome...';

// doc fragments are nice if you want to insert DOM nodes
// without inserting an additional tag
var frag = document.createDocumentFragment();
frag.appendChild(ifr);
frag.appendChild(div);

/*
  Below is how we ensure that our widget is inserted in the same position
  in the DOM that our script node is without using document.write
*/
  
// get a list (note: it is a NodeList) of script nodes on the page
var self_script = document.getElementsByTagName('script');

// the last one in the list will be the current one you are in
self_script = self_script[self_script.length - 1];

// insert DOM elements before me
self_script.parentNode.insertBefore(frag, self_script);

</script>