<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Jon Fox &#187; browser crash</title>
	<atom:link href="http://www.jonefox.com/blog/tag/browser-crash/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.jonefox.com/blog</link>
	<description>My rants, ramblings, and random thoughts</description>
	<lastBuildDate>Mon, 16 Jan 2012 14:48:11 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
<cloud domain='www.jonefox.com' port='80' path='/blog/?rsscloud=notify' registerProcedure='' protocol='http-post' />
		<item>
		<title>Internet Explorer and the innerHTML Property</title>
		<link>http://www.jonefox.com/blog/2009/05/21/internet-explorer-and-the-innerhtml-property/</link>
		<comments>http://www.jonefox.com/blog/2009/05/21/internet-explorer-and-the-innerhtml-property/#comments</comments>
		<pubDate>Thu, 21 May 2009 06:19:47 +0000</pubDate>
		<dc:creator>jon</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[browser crash]]></category>
		<category><![CDATA[innerHTML]]></category>
		<category><![CDATA[Internet Explorer]]></category>
		<category><![CDATA[tables]]></category>

		<guid isPermaLink="false">http://jonefox.com/blog/?p=181</guid>
		<description><![CDATA[Recently while helping a friend deal with the joys of cross-browser JavaScript when working with widgets, I was reminded of a painful quirk in how Intenert Explorer handles the innerHTML property of DOM elements in some cases.Â  In particular, DOM &#8230; <a href="http://www.jonefox.com/blog/2009/05/21/internet-explorer-and-the-innerhtml-property/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Recently while helping a friend deal with the joys of cross-browser JavaScript when working with widgets, I was reminded of a painful quirk in how Intenert Explorer handles the innerHTML property of DOM elements in some cases.Â  In particular, DOM elements that are part of a table, or are a child to a table (no matter how many levels deep), can&#8217;t have the innerHTML property set at run time.Â  Doing so produces a completely unhelpful error message and crashes the rendering engine.Â  This is not only true for tables, but unfortunately happens with several other HTML elements in regard to Internet Explorer.</p>
<p>So, how does one get around this unfortunate problem?Â  Well, the best method I&#8217;ve found is to set the innerHTML property when the element is not yet attached to the DOM or is attached in a &#8220;safe&#8221; place (usually at the BODY tag).Â  To make this process simpler, I generalized this into a function that creates a new DOM node of the same type, preserves any attributes I care about, sets the innerHTML property, and replaces the original node in the DOM with this new node having the desired innerHTML.Â  Here&#8217;s the function for reference:</p>
<pre>
function replace_html(el, html) {
	if( el ) {
                var oldEl = (typeof el === "string" ? document.getElementById(el) : el);
                var newEl = document.createElement(oldEl.nodeName);

                // Preserve any properties we care about (id and class in this example)
                newEl.id = oldEl.id;
                newEl.className = oldEl.className;

                //set the new HTML and insert back into the DOM
                newEl.innerHTML = html;
                if(oldEl.parentNode)
        	        oldEl.parentNode.replaceChild(newEl, oldEl);
                else
		        oldEl.innerHTML = html;

                //return a reference to the new element in case we need it
                return newEl;
	}
};
</pre>
<p>Hopefully this function will help someone out there work around this problem a little faster than I originally did.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.jonefox.com/blog/2009/05/21/internet-explorer-and-the-innerhtml-property/feed/</wfw:commentRss>
		<slash:comments>34</slash:comments>
		</item>
	</channel>
</rss>

