CODEWITHSUNDEEP
javascriptdomprototypejs
Gaspard Bucher
Gaspard Bucher

Reputation: 6137

Insert innerHTML with Prototypejs

Say I have a list like this:

<ul id='dom_a'>
  <li>foo</li>
</ul>

I know how to insert elements in the ul tag with:

Element.insert('dom_a', {bottom:"<li>bar</li>"});

Since the string I receive contains the dom id, I need to insert the inner HTML instead of the whole element. I need a function to do this:

insert_content('dom_a', {bottom:"<ul id='dom_a'><li>bar</li></ul>"});

And obtain:

<ul id='dom_a'>
  <li>foo</li>
  <li>bar</li>
</ul>

How should I do this with Prototype ?

Here is the solution I have come up with, can anyone make this better ?

Zena.insert_inner = function(dom, position, content) {
  dom = $(dom);
  position = position.toLowerCase();
  content = Object.toHTML(content);
  var elem = new Element('div');
  elem.innerHTML = content; // strip scripts ?
  elem = elem.down();
  var insertions = {};
  $A(elem.childElements()).each(function(e) {
    insertions[position] = e;
    dom.insert(insertions);
  });
}

Upvotes: 0

Views: 2947

Answers (5)

Shubhojoy Mitra
Shubhojoy Mitra

Reputation: 21

If you are using PrototypeJS, you might also want to add script.aculo.us to your project. Builder in script.aculo.us provides a nice way to build complex DOM structures like so:

var myList = Builder.node("ul", {
    id: "dom_a"
},[
    Builder.node("li", "foo"),
    Builder.node("li", "bar"),
]);

After this, you can insert this object which should be rendered as HTML anywhere in the DOM with any insert/update functions (of PrototypeJS) or even standard JavaScript appendChild.

$("my_div").insert({After: myList});

Note that in PrototypeJS insert comes in 4 different modes: After, Before, Top and Bottom. If you use insert without specifying a "mode" as above, the default will be Bottom. That is, the new DOM code will be appended below existing contents of the container element as innerHTML. Top will do the same thing but add it on top of the existing contents. Before and After are also cool ways to append to the DOM. If you use these, the content will be added in the DOM structure before and after the container element, not inside as innerHTML.

With Builder however, there is one thing to keep in mind, .. okay two things really: i. You cannot enter raw HTML in the object as content... This will fail:

Builder.node("ul", "<li>foo</li>");

ii. When you specify node attributes, keep in mind that you must use className to signify HTML attribute class (and possibly also htmlFor for for attribute... although for attribute seems to be deprecated in HTML5(?), but who does not want to use it for labels)

Builder.node("ul", {
    id: "dom_a",
    className: "classy_list"
});

I know you are scratching your head because of point i. > What, no raw HTML, dang! Not to worry. If you still need to add content which might contain HTML inside a Builder created DOM, just do it in the second stage using the insert({Before/After/Top/Bottom: string}). But why'd you want to do it in the first place? It would be really good practice if you wrote an once for all function that generates all kinds of DOM elements rather than stitching in all sorts of strings. The former approach would be neat and elegant. This is something like the inline style versus class type of question. Good design should after all separate content from meta content, or formatting markup / markdown.

One last thing to keep handy in your toolbox is Protype's DOM traversal in case you want to dynamically insert and delete content like a HTML Houdini. Check out the Element next, up, down, previous methods. Besides the $$ is also kinda fun to use, particularly if you know CSS3 selectors.

Upvotes: 0

clockworkgeek
clockworkgeek

Reputation: 37700

You could use regular expression to strip the outer element.

Element.Methods.insert_content = function(element, insertions) {
    var regex = /^<(\w+)[^>]*>(.*)<\/\1>/;
    for (key in insertions) {
        insertions[key] = regex.exec(insertions[key])[2];
    }
    Element.insert(element, insertions);
};
Element.addMethods();

$('dom_a').insert_content({bottom:"<ul id='dom_a'><li>bar</li></ul>"});

Upvotes: 0

robertc
robertc

Reputation: 75747

I think you can slim down the code a bit by simply appending the innerHTML of the first child of temporary element:

Zena.insert_inner = function(dom, position, content) {
    var d = document.createElement('div');
    d.innerHTML = content;
    var insertions = {};
    insertions[position] = d.firstChild.innerHTML;
    Element.insert(dom, insertions);
}

Not too much of an improvement though, example here.

Upvotes: 1

Kyle
Kyle

Reputation: 887

I think you could parse the code block in your variable, then ask it for its innerHTML, and then use insert to stick that at the bottom of the actual node in the DOM.

That might look like this:

var rep_struct = "<ul id='dom_a'><li>bar</li></ul>";
var dummy_node = new Element('div'); // So we can easily access the structure
dummy_node.update(rep_struct);
$('dom_a').insert({bottom: dummy_node.childNodes[0].innerHTML});

Upvotes: 2

Armando Freire
Armando Freire

Reputation: 417

I've been looking into the Prototype Documentation and I found this: update function.

By the way you described it, you could use the update function in order to find the current bottom content and then update it (just like innerHTML) by adding the desired code plus the previous stored code.

Upvotes: 0

Related Questions