0

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);
  });
}
Improve this question
1

5 Answers 5

Reset to default
2

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});
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I think using innerHTML=rep_struct is lighter and it seems to work too: jsfiddle.net/gaspard/eZnZF.
1

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.

Improve this answer

1 Comment

Thanks for the pointer to jsfiddle. Strangely, I had to change 'firstChild' to 'childElements()[0]' for it to work in Zena... (jsfiddle.net/gaspard/sDGxe).
0

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.

Improve this answer

1 Comment

This would not work: you would end with <ul id='dom_a'><li>foo</li><ul id='dom_a'><li>bar</li></ul></ul> which is not even legal HTML.
0

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>"});
Improve this answer

Comments

0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.