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

5 Answers 5

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