Say you get HTML string like this returned from the server:

“<div>Here’s the list: <ul><li>item1</li><li>item2</li> </ul></div>″

Calling it would simply be like this:

var eAlertMsg = document.getElementById(’alertMsg’);
$(eAlertMsg).injectHTML( “<div>Here’s the list: <ul><li>item1</li><li>item2</li> </ul></div>″, “div” );

Element.implement({
/**
* Here’s how you do innerHTML with ie6 on mootools.1.2 framework – moerk
*
* @params String htmlContent – A string representation of raw HTML which is about to be created.
* @params String wrapperTagName – htmlContent must have some sort of wrapper tag which holds the rest of html content.
* @returns Object – Converted html objects
*/
injectHTML: function( htmlContent, wrapperTagName ){
var x = new Element(‘div’, {html: htmlContent}).getElement( wrapperTagName );
this.empty();
x.inject( this );
}
});

Say you get HTML string like this returned from the server:

“Here’s the list:item1item2″

Calling it would simply be like this:

var eAlertMsg = document.getElementById(‘alertMsg’);
$(eAlertMsg).injectHTML( “Here’s the list:item1item2″, “div” );

Element.implement({
/**
* Here’s how you do innerHTML with ie6 on mootools.1.2 framework
*
* @params String htmlContent – A string representation of raw HTML which is about to be created.
* @params String wrapperTagName – htmlContent must have some sort of wrapper tag which holds the rest of html content.
* @returns Object – Converted html objects
*/
injectHTML: function( htmlContent, wrapperTagName ){
var x = new Element(‘div’, {html: htmlContent}).getElement( wrapperTagName );
x.inject( this );
}
});

- jan

I created a post at the mootools newsgroup looking for a mootools equivalent for Prototype’s Element.replace method (with deals with HTML directly) that does exactly that in a straight-forward way without all the hassles.

here’s the link: http://groups.google.com/group/mootools-users/browse_thread/thread/1dffe721ee0e8c1c/184c0d22e0a684b6?hl=en&lnk=gst&q=Element.replace#184c0d22e0a684b6

I’m fine with the mootools way, using DOM Elements through-out the framework, as long as there is a simple way to get this desired DOM Elements.

I would definitely vote for a HTML to DOM-Elements functionality in mootools-core…

Sometimes you have to let the frameworks remain uncluttered and capture your specific use cases into a thin veneer (Adapter pattern) that your application invokes. With this approach, what often happens is a library of useful functions and classes will grow organically and then become quite powerful and useful in of themselves. http://clientside.cnet.com/ is a great example of such a set of libraries growing out from the Mootools framework.

imo such a htmlToElement method is one of the most missing features of mootools. It’s okay that they prefer working with DOM elements over using plain html for injection but there should at least be a simple bridge supported by the framework.

I’m considering about to create a patch for the Elements constructor, which allows constructing DOM elements from plain HTML.

But i’ts pretty hard to find a concise API for that purpose:

new Element(null,’…’);

is as ugly as..

Element.fromHTML(‘…’);

also extending the String class is not the best option?

somewhat like:

“…”.toElement();

ideas? welcome!

and again.. thanks for that article!

You’ve encountered a bug in IE that I track as bug 210.
http://webbugtrack.blogspot.com/2007/12/bug-210-no-innerhtml-support-on-tables.html

If you want to keep up to date with when IE fixes this issue (e.g. it isn’t fixed in IE8 Betas yet), view other innerHTML bugs (http://webbugtrack.blogspot.com/search/label/innerHTML) or view other frustrating IE bugs feel free to peruse my bug blog.

Have a great day,
Max