I did find several questions concerning the NOT_FOUND_ERR: DOM Exception 8 error in bination with jQuery, but they did not happen in a scenario like mine and as such they did not provide a solution.

Basically, I have an object and I'm iterating over it and then adding rows to a <table> with id="legend": /.

var items  = [],
    obj    = {a: 1,
              b: 2};

$.each(obj, function(i, v) {
    items.push(
        $("<tr>").append(
            $("<td>").html(i),
            $("<td>").html(v)
        )
    );
});

// .empty() is to erase contents when running this piece of code again
$("#legend").empty().append(
                        $(items)
                     );

When I run this piece of code, I get the error:

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

on Chrome.

I'm not sure what exactly is wrong with my code.

• What cannot be found?
• How can I solve this issue?

I did find several questions concerning the NOT_FOUND_ERR: DOM Exception 8 error in bination with jQuery, but they did not happen in a scenario like mine and as such they did not provide a solution.

Basically, I have an object and I'm iterating over it and then adding rows to a <table> with id="legend": http://jsfiddle/nt9gZ/.

var items  = [],
    obj    = {a: 1,
              b: 2};

$.each(obj, function(i, v) {
    items.push(
        $("<tr>").append(
            $("<td>").html(i),
            $("<td>").html(v)
        )
    );
});

// .empty() is to erase contents when running this piece of code again
$("#legend").empty().append(
                        $(items)
                     );

When I run this piece of code, I get the error:

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

on Chrome.

I'm not sure what exactly is wrong with my code.

• What cannot be found?
• How can I solve this issue?

• javascript
• jquery
• dom
• append
• html-table

Share Improve this question Follow edited Jul 31, 2011 at 14:35 Gabriele Petrioli 196k3434 gold badges271271 silver badges328328 bronze badges asked Jul 31, 2011 at 14:12 pimvdbpimvdb 155k8080 gold badges311311 silver badges356356 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

You are trying to insert an array of arrays..

Add a .get(0) when you are pushing the created object in the array, so that you insert the actual DOM fragments..

$.each(obj, function(i, v) {
    items.push(
        $("<tr>").append(
            $("<td>").html(i),
            $("<td>").html(v)
        ).get(0)
    );
});

demo at http://jsfiddle/gaby/nt9gZ/7/

I've update your code a bit: http://jsfiddle/nt9gZ/8/

Basically there problem with the array - append method does not take array of jQuery objects as an argument, only a sequence of elements. So I've used add method to collect all rows together.

I am not familiar with your below code

$("<tr>").append(
            $("<td>").html(i),
            $("<td>").html(v)
        )

But here is another way to achieve the same.

var items  = [],
obj = {a: 1, b: 2};

$.each(obj, function(i, v) {
    items.push("<tr>"+"<td>"+i+"</td><td>" + v +"</td></tr>");
});

$("#legend").append(items.join(""));

from your jsfiddle

Append do not expect array in the first argument. However, reading the doc, the second arg can be an array. I can't manage to pass an array and make it work (as the second argument) though.

Try this jsfiddle

you should loop over items in items array and append 'em one by one