Javascript innerHTML без дочерних узлов? - PullRequest
Новая
       6

Javascript innerHTML без дочерних узлов?

2 голосов
/ 19 апреля 2010

У меня проблема с Firefox, когда я не вижу дрова для деревьев используя AJAX я получаю HTML источник из PHP-сценария

этот html-код содержит тег и внутри tbody еще несколько tr / td's

Теперь я хочу добавить этот открытый код в существующую таблицу. но есть еще одно условие: таблица является частью формы и, таким образом, содержит флажки и раскрывающиеся списки. если бы я использовал table.innerHTML + = content; Firefox перезагружает таблицу и сбрасывает все элементы в ней, что не очень удобно для пользователя, так как id хотел бы иметь

что у меня есть это 

// content equals transport.responseText from ajax request
function appendToTable(content){
    var wrapper = document.createElement('table');
    wrapper.innerHTML = content;
    wrapper.setAttribute('id', 'wrappid');
    wrapper.style.display = 'none';
    document.body.appendChild(wrapper);

    // get the parsed element - well it should be
    wrapper = document.getElementById('wrappid');
    // the destination table
    table = document.getElementById('tableid');

    // firebug prints a table element - seems right
    console.log(wrapper);
    // firebug prints the content ive inserted - seems right
    console.log(wrapper.innerHTML);

    var i = 0;
    // childNodes is iterated 2 times, both are textnode's
    // the second one seems to be a simple '\n'
    for(i=0;i<wrapper.childNodes.length;i++){
        // firebug prints 'undefined' - wth!??
        console.log(wrapper.childNodes[i].innerHTML);
        // firebug prints a textnode element - <TextNode textContent=" ">
        console.log(wrapper.childNodes[i]);
        table.appendChild(wrapper.childNodes[i]);
    }
    // WEIRD: firebug has no problems showing the 'wrappid' table and its contents in the html view - which seems there are the elements i want and not textelements
}

либо это так тривиально, что я не вижу проблемы, ИЛИ это угловой случай, и я надеюсь, что у кого-то здесь есть такой опыт, чтобы дать совет по этому вопросу - любой может представить, почему я получаю текстовые узлы, а не окончательно проанализированные элементы dom, которые я ожидаю?

btw: btw я не могу привести полный пример, потому что я не могу написать меньший нерабочий кусок кода это одна из тех ошибок, которые происходят в дикой природе, а не в моем наборе тестов

спасибо всем

Ответы [ 3 ]

2 голосов
/ 19 апреля 2010

Вероятно, вы столкнулись с особенностью Firefox следовать спецификации W3C. В спецификации пробелы между тегами являются «текстовыми» узлами вместо элементов. Эти TextNodes возвращаются в childNodes. Этот другой ответ описывает обходной путь. Также использование чего-то вроде JQuery делает это намного проще.

0 голосов
/ 20 апреля 2010

Что ж, возвращение объекта JSON с новыми данными кажется наилучшим вариантом. Затем вы можете синтезировать дополнительные элементы таблицы, используя его.

Если кто-то вынужден получить простой HTML в качестве ответа, можно использовать, например, var foo = document.createElement('div');, а затем сделать foo.innerHTML = responseText;. Это создает элемент, который ни к чему не добавляется, но в котором размещается проанализированный HTML-ответ.
Затем вы можете развернуть элемент foo, получить необходимые элементы и добавить их к таблице в удобной для DOM форме.

Редактировать:

Ну, я думаю, теперь я понимаю вашу точку зрения.
wrapper сам элемент таблицы. Узлы находятся под tbody, дочерним элементом wrapper, который является его lastChild (или вы можете получить к нему доступ через член tBodies[0] в Firefox).
Затем, используя элемент tBody, я думаю, что вы сможете получить то, что вы хотите.

Кстати, вам не нужно добавлять оболочку к документу перед добавлением его дочерних элементов к таблице, поэтому не нужно скрывать это и т. Д.

0 голосов
/ 19 апреля 2010

Я ожидал бы такое поведение в любом браузере, так как операнд + = переписывает то, что уже находится в таблице по определению.Два решения:

Вместо того, чтобы получать HTML-код из вашего PHP-файла, пусть PHP сгенерирует список элементов для добавления в таблицу.Запятая / табуляция разделены, что угодно.Затем используйте Table.addRow (), Row.addCell () и cell.innerHTML, чтобы добавить элементы в таблицу.Это тот способ, который я бы предложил сделать, не создавая элементов GUI в двух отдельных файлах.

Другое решение - сохранить все данные формы, которые уже были введены, в локальные переменные JavaScript, добавить таблицуи затем перезагрузите данные в поля формы.

...