mootools: Creating a new DOM element from an HTML

Question

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>...';

Answer 1

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

Answer 2

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.

Answer 3

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.net/chetabahana/qbx9b5pm/