How to create DOM elements from string (pass from ajax) in Mootools?

In jQuery a simple solution is $( elements )

var elements = '<i>This is italic</i><b>this bold</b>...';

How to create DOM elements from string (pass from ajax) in Mootools?

In jQuery a simple solution is $( elements )

var elements = '<i>This is italic</i><b>this bold</b>...';

• javascript
• mootools

• 1 mootools/blog/2010/03/19/a-better-way-to-use-elements – Andreas Commented Jun 16, 2012 at 11:47

3 Answers 3

Simple as: Elements.from('<i>This is italic</i><b>this bold</b>')

Without a string, you would use the Element class:

var el = new Element('div#id.class', {
    text: 'My text',
});

With a string, you can check how it's one in Request.HTML, see here.

var temp = new Element('div').set('html', response.html);
response.tree = temp.childNodes;
response.elements = temp.getElements(options.filter || '*');

Basically Mootools elements & DOM elements are the same, this is another SO questions which creates DOM nodes from HTML: Creating a new DOM element from an HTML string using built-in DOM methods or prototype

From old Mootools forums, I found an interesting idea too: add a new method Element.fromString() or String.toElement() which would contain this logic.

I'm using the latest Mootools 1.6.0.
It throws Elements.from is not a function.

This one works for me:

var html = '<img src='+item.src+'>';
var el = new Element('li').set('html', html);

The working code: http://jsfiddle/chetabahana/qbx9b5pm/