innerHTML's Storied Past & HTML's Shiny Future

Paul Irish

First...

A little tale about traversing a table

tags vs elements?

How a markup becomes a DOM





  html markup                      the              
    │        ╓─────────╖           DOM              
    ↳━━━━╢ parser  ╟━━━━━━↗  
             ╙─────────╜      
      
      
      
      
      

The Parsing Model

What happens when we want
to augment that DOM?


  html markup                      the  
    │        ╓─────────╖           DOM  
    ↳━━━━╢ parser  ╟━━━━━━↗↑          
             ╙─────────╜            │          
                                    │   
                                    │ how???
                                    │
                                    │
                                new HTML
  

my postulate...

innerHTML is revolutionary.

Let's go back 15 years...

The DOM Level 0 API

createElement, createTextNode, appendChild, insertBefore

The DOM Level 0 API

Let's add this to the DOM:

<p>Tim<strong> says <em>hello</em> to</strong> Kez and <em>Dan</em></p>





















        

Gonna cheat with DOMTool a bit...

Enter...

innerHTML

Instead of:

var p1=document.createElement('p');
var txt1=document.createTextNode('Tim');
p1.appendChild(txt1);
var strong1=document.createElement('strong');
p1.appendChild(strong1);
var txt2=document.createTextNode('says ');
strong1.appendChild(txt2);
var em1=document.createElement('em');
strong1.appendChild(em1);
var txt3=document.createTextNode('hello');
em1.appendChild(txt3);
var txt4=document.createTextNode('to');
strong1.appendChild(txt4);
var txt5=document.createTextNode('Kez and ');
p1.appendChild(txt5);
var em2=document.createElement('em');
p1.appendChild(em2);
var txt6=document.createTextNode('Dan');
em2.appendChild(txt6);
mycontainer.appendChild(p1);

Just:

mycontainer.innerHTML += '<p>Tim<strong>says <em>hello</em> \
                          to</strong> Kez and <em>Dan</em></p>';

A Brief History of innerHTML

Back in 1996... DHTML on the horizon

... an aside on IE's good calls.

IE's good calls.

Sources: Rob Larsen, htmlcssjavascript.com and me and ryan seddon.

... an aside on the doctype.

Modal rendering via Doctype

ok, back to innerHTML..

What if it never was?

over at Mozilla..

createContextualFragment()

createContextualFragment predates innerHTML in Gecko ... from the era when IEisms were bad but creating own vendor-specific ad hoc APIs was OK
hsivonen in #whatwg.

createContextualFragment API

var range = document.createRange();
range.selectNode(document.body); 

var htmlStr = '<p>Tim <strong>says <em>hello</em> \
               to</strong> Kez and <em>Dan</em></p>';
              
var documentFragment = range.createContextualFragment(htmlStr);

mycontainer.appendChild(documentFragment);          
        

createContextualFragment & innerHTML

> I was just wondering why createContextualFragment is available in
> Mozilla browsers when they also have innerHTML which seems to do
> exactly the same thing?

Sometimes IE wins, as with innerHTML vs createContextualFragment.
Sometimes IE loses, as with document.all vs document.getElementById.
Sometimes two competing ideas don't win out, as in addEventListener
and attachEvent
some dude on CLJ. June '08

tags vs elements

HTML the markup and HTML the serialization


  html markup                      the        serialized html
    │        ╓─────────╖           DOM                       ↑
    ↳━━━━╢ parser  ╟━━━━━━↗  │                      │
        ↗   ╙─────────╜              ↘━━━━━━━━━━━━↗   
        │                                innerHTML (getter)      
        ┗━━━━━━━━━━━━━
            innerHTML (setter)   ↖
                                   │
                                new HTML

HTML Tricks!

Optional start tags

<html>
<head>
<body>


<colgroup>
<tbody> 

See: Webkit source: HTMLTreeBuilder.cpp :: processFakeStartTag()

Optional end tags

Structural stuff like:

</html>, </head>, </body>

Lists stuff like:

</dt>, </dd>, </li>

Table stuff like:

</thead>, </th>, </tbody>, </tr>, </td>, </tfoot>, </colgroup>

Lest we forget:

</p>, </option>

Optional end tags

<ul>
    <li>item one
    <li>item two
    <li>item three
</ul>

<table>
    <tr>
        <th>header uno
        <th>header dos
    <tr>
        <td>cell uno
        <td>cell dos
</table>
    

Minimal markup

<!doctype html>
<meta charset=utf-8>
<title>svelte ain't it?</title>

<p>SUP   
        

Take a peek at www.google.com/404

The data uri text editor

          
          data:text/html,<pre contenteditable>
        

Only escaping left <

<pre>
&lt;!doctype html>
&lt;meta charset=utf-8>
&lt;title>svelte ain't it?&lt;/title>

&lt;p>SUP   
</pre>

You probably don't need to keep &amp;'ing

<!-- invalid: -->
<h2>Marc ~&~ Lisa</h2>
<!-- yr cool, bro: -->
<h2>Marc ~&amp;~ Lisa</h2>
<!-- totes valid: -->
<h2>Marc & Lisa</h2>
<h2>Marc <span>&</span> Lisa</h2>

valid values for your @id attribute

quote-free attributes make you feel ALIVE

personalize your doctype


<!doctype html public " "> 


      ... may I suggest ...

        
<!doctype html public "intoxication">
<!doctype html public "display of affection">
<!doctype html public " ♥♡☺♡ ♥♡☺♡ ♥">
<!doctype html public "✰">
<!doctype html public "☃ ☕☕☕">
<!doctype html public "<!doctype html">
The html5 spec is a repository of valuable browser knowledge much acquired through reverse engineering.

Spend some time at developers.whatwg.org

Thank you!

Thx: @Divya Manian, @Mathias Bynens, Henri @hsivonen,
@tabatkins, @robreact Larsen