injecting arbitrary HTML string into document (javascript) - updated

Question

Update: I just narrowed my problem to this:

Why doesn't this work:

var tmp = document.createElement('tbody');
tmp.innerHTML="<tr><td>hello</td></tr>";

tmp is getting the string hello. the tr and td html is lost (on FireFox). Why is that? and how can I make such html injection work?

Original question:

I need to inject arbitrary HTML after a arbitrary element in arbitrary HTML documents. I came across this method (inject the html string into dynamically generated div, get its firstchild element and insert it in the right place):

var tmp = document.createElement('div'); 
tmp.innerHTML = _injected_html;
var new_w = tmp.firstChild;
var parent = insertion_point.parentNode;
parent.insertBefore(new_w, insertion_point.nextSibling);

The problem is that this does not work when trying to inject table elements. if the injected html is for example

"<tr> <td> table data </td> </tr>"

The _tmp.innerHTML = _injected_html; would not accept it (adding tr under div element).

Any idea how to make this work for any tag?

is insertion_point guaranteed to have a nextSibling (which might be null otherwise)? — falstro
– falstro, Commented Jul 29, 2009 at 20:20

Aistina · Accepted Answer · 2009-07-29 20:46:42Z

2

Are you testing in IE by any chance? Most likely it does work in other browsers.

Here's why

edit: Wait, you're inserting something into the table that looks like <div><tr><td>... that's not going to work. Why don't you replace the document.createElement('div') by document.createElement('tr'), and remove the <tr> tags from the _injected_html?

Something like this (tested in Firefox):

<script>
var i = 3;

function f() {
    var table = document.getElementById('someTable');
    var children = table.children[0].children;
    var after = children[Math.round(Math.random() * (children.length - 1))];
    var html = "<td>" + i++ + "</td>";

    g(html, after);
}

function g(_injected_html, insertion_point) {
    var tmp = document.createElement('tr'); 
    tmp.innerHTML = _injected_html;
    var new_w = tmp.firstChild;
    var parent = insertion_point.parentNode;
    parent.insertBefore(new_w, insertion_point.nextSibling);
}
</script>

<table id="someTable" onclick="f();">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
</table>

The second line of f() is a little awkward, but it gets the first child of the table (which is a <tbody>, and then its children (the actual <tr>s).

edited Jul 29, 2009 at 20:46

answered Jul 29, 2009 at 20:20

Aistina

12.7k14 gold badges73 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nir Over a year ago

testing on FF at this point. Final solution should be completely cross browser

falstro Over a year ago

nice catch, do you know what IE versions are affected by any chance?

Al. · Accepted Answer · 2009-07-29 20:23:55Z

0

<div><td><lol/>

..isn't valid HTML! Containers are required for table rows/cols/heads, list items, definition lists and so on. Could you somehow validate the HTML for proper containers before injecting it?

answered Jul 29, 2009 at 20:23

Al.

2,8822 gold badges22 silver badges34 bronze badges

Comments

OMG Ponies · Accepted Answer · 2009-07-29 20:32:04Z

0

The following javascript will allow you to inject HTML/etc into the local page:

var example = "<p>test</p>"
document.body.appendChild(example);

That said, you will have to customize the code depending on what you are inserting.

answered Jul 29, 2009 at 20:32

OMG Ponies

334k85 gold badges536 silver badges508 bronze badges

1 Comment

user457586 Over a year ago

TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

jwl · Accepted Answer · 2009-07-29 20:33:03Z

0

For a table, you must insert tr's into tbody. When you write html

<table><tr><td>abc</td></tr></table>

IE, FF, Chrome, Safari at least (don't know about others directly) will modify this to be:

<table><tbody><tr><td>abc</td></tr></tbody></table>

Therefore, something like:

var tmp = document.createElement('tr'); 
tmp.innerHTML = "<td>def</td>";
var new_w = tmp.firstChild;
var parent = insertion_point.parentNode;
parent.insertBefore(new_w, insertion_point.nextSibling);

if insertion_point is a tr tag.

But honestly, with Jquery there are more elegant ways of going about this as christina toma notes.

answered Jul 29, 2009 at 20:33

jwl

10.5k16 gold badges59 silver badges93 bronze badges

1 Comment

Nir Over a year ago

Thanks! Please see the update above. I don't think this is the problem. (+ I can't use jquery)

Collectives™ on Stack Overflow

injecting arbitrary HTML string into document (javascript) - updated

4 Answers 4

2 Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related