NOT_FOUND_ERR при добавлении в таблицу с помощью jQuery

Question

Я нашел несколько вопросов, касающихся ошибки NOT_FOUND_ERR: DOM Exception 8 в сочетании с jQuery, но они не произошли в сценарии, подобном моему, и поэтому не дали решения.

По сути, у меня есть объект, и я перебираю его, а затем добавляю строки в <table> с помощью id="legend": http://jsfiddle.net/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)
                     );

Когда я запускаю этот кусок кода, я получаю сообщение об ошибке:

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

в Chrome.

Я не уверен, что именно не так с моим кодом.

• Что не может быть найдено?
• Как я могу решить эту проблему?

Answer 1

Вы пытаетесь вставить массив массивов ..

Добавьте .get(0), когда вы нажимаете созданный объект в массиве, чтобы вставить фактические фрагменты DOM ..

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

демо на http://jsfiddle.net/gaby/nt9gZ/7/

Answer 2

Я немного обновил ваш код: http://jsfiddle.net/nt9gZ/8/

По существу, существует проблема с массивом - append метод не принимает массив объектов jQuery в качестве аргумента, только последовательность элементов.Поэтому я использовал add метод, чтобы собрать все строки вместе.

Answer 3

из вашего jsfiddle

При добавлении не ожидайте массив в первом аргументе.Однако, читая документ, второй аргумент может быть массивом.Мне не удается передать массив и заставить его работать (как второй аргумент).

Answer 4

Попробуйте это jsfiddle

Вы должны перебрать элементы в массиве items и добавить их один за другим

Answer 5

Я не знаком с вашим кодом

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

Но вот еще один способ добиться того же.

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(""));