How can I insert an HTML string into an element?

Question

Using Mootools, we can insert an element into another element:

$('childID').inject($('parentID'), 'top');

The second parameter allows me to control the location and can be “top” or “bottom” to enter it in the parent object or “before” or “after” to enter it as a sibling.

We can also set the HTML element from the string:

var foo = "<p>Some text</p>";
$('parentID').set('html', foo);

My problem is that I want to have the same flexibility with strings as with elements. For example, I cannot put a line at the top of an element with set(), because it overwrites the HTML, and does not add it in a specific place. Similarly, I cannot add HTML after or before the sibling element.

Is there a function that allows me to enter lines the same way I insert elements?

Answer 1

The best decision

The injection method will look like this:

inject: function(element, location) {
    var el = Elements.from(this);

    if($type(el) === 'array') var el = el.reverse();

    return el.inject(element, location);
}

Let me break it into pieces.

1) Elements.from(this)takes everything the method applies to and converts it into elements:

var foo = "<p>Some text</p>";
var el = Elements.from(foo);
//el is equal to a p element. 

var bar = "<div>First div</div><div>Second div</div>";
var el = Elements.from(bar);
//el is equal to an array containing 2 div elements

2) if($type(el) === 'array')checks if el is an array. If so, then apply .reverse()to el. This is necessary to enter items in the correct order. Otherwise, they will enter, for example, the second div first and the first div second. Obviously, if el is just one element, we do not need to change its order.

3) , el , , , location. el , .

, . implement():

String.implement({
    inject: function(element, location) {
        var el = Elements.from(this);

        if($type(el) === 'array') var el = el.reverse();

        return el.inject(element, location);
    }
});

, . , domready, .. window.addEvent('domready', function() { ... });

:

var foo = "<p>Some text</p>";
foo.inject($('parentID'), 'top');

p parentID.

"" "" , :

inject: function(element, location) {
    var html = element.get('html')

    if(location === 'top') return element.set('html', this + html);
    else if (location === 'bottom') return element.set('html', html + this);
}

innerHTML , , HTML, HTML , . innerHTML .

, innerHTML , , , , , , . , ( innerHTML), ( , ).

, "" "".

Answer 2

:

foo.innerHTML = foo.innerHTML + 'string';

:

foo.innerHTML = 'string' + foo.innerHTML;

Answer 3

appendText. , Mootools:

http://mootools.net/docs/core/Element/Element#Element:appendText

HTML

<div id="myElement">partner.</div>

JavaScript

$('myElement').appendText('Howdy, ', 'top');

() "bottom", "", "", "" "".

HTML

<div id="myElement">Howdy, partner.</div>

:

http://jsfiddle.net/hq5Gr/

Answer 4

:

var foo = "<p>Some text</p>"
$('parentID').set('html', foo + $('parentID').get('html')); // prepend/top
$('parentID').set('html', $('parentID').get('html') + foo)); // append/bottom

Answer 5

, , .

-, slick mootools 1.3 "" Element, -:

http://www.jsfiddle.net/dimitar/aQvpb/

new Element('div#myId.myClass.myOtherClass[title=Mouseover Title][text=Dimitar Was Here]').injectAfter(document.id("foo"));

new Element("input#someID.someClass1.someClass2[disabled=true]");

-, element.injectAfter(previousEl) element.injectBefore(followingEl) - node.

html, html , , , ( UID)

Slick mootools, atm, , . , 1.3.

Answer 6

.

:

var yourTextNode = element.appendChild(document.createTextNode("some text"))

:

var yourTextNode = element.parentNode.insertBefore(document.createTextNode("some text"), element)

node, yourTextNode.nodeValue = "new value here".

Answer 7

@shanebo , appendText HTML.

Try:

http://mootools.net/core/docs/1.5.1/Element/Element#Element:appendHTML

$('myElement').appendHTML('<div>Hello world</div>', 'top');

Fiddle: http://jsfiddle.net/m0ez1t50/1/