Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Как получить DOM element из строки

Автор: Lixil 8.1.2006, 14:35

Кто - нибудь занет, как можно создать элемент из строки?

Проблема вот в чем: у меня есть таблица, я принимаю кусок html кода через XMLHttpRequest примерно такого содержания.

Код


<tr id="43" parnt="42">
<td>
blah blah blah
</td>
<td>
blah blah blah
</td>
</tr>

В виде строки!

мне его надо прицепить к таблице через insertBefore. Как это можно сделать? Создавать <tr>, править параметры и втыкать в него <td> через innerHTML не хочется.
Принимать XML тоже не получится, там у меня специфика своя smile

Автор: Greendrake 8.1.2006, 14:57

loadXML
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/19957329-69cd-456a-876f-7d2b692b0afc.asp

Потом, кажется, полученный DOM-элемент придётся клонировать, ибо чужеродные элементы неохотно инсертятся/аппендятся.

Цитата

Принимать XML тоже не получится, там у меня специфика своя smile

А стоит ли эта специфика её использования, если она требует левое ухо чесать правой рукой? XMLHTTPRequest заточен именно под XML, responseText в него добавили как баловство, коим пользуютя не по назначению ИМХО.

Автор: Lixil 8.1.2006, 16:04

Цитата(Greendrake @ 8.1.2006, 14:57

)

loadXML

А есть что - нибудь кроссбраузерное? smile

Цитата(Greendrake @ 8.1.2006, 14:57

)

стОит! Иногда приходится и не такие костыли вставлять, чтобы все это везде заработало.

Автор: Greendrake 8.1.2006, 16:29

Цитата

loadXML

А есть что - нибудь кроссбраузерное? smile

... не такие костыли вставлять, чтобы все это везде заработало

Вообще-то, loadXML - это не выпендрон ИЕ, а стандартный метод от DOM W3C. И если браузер не поддерживает стандарты w3с, может ну его н.., этот браузер? Иначе где же предел до которого поддерживать кроссбраузерность? Почему бы под IE и Нетскейп 3-х версий не точить?

Автор: Lixil 8.1.2006, 16:45

Цитата(Greendrake @ 8.1.2006, 16:29

)

Вообще-то, loadXML - это не выпендрон

ОК тогда как мне вызвать loadXML без IE шных выпендронов вроде

Код


ActiveXObject("Msxml2.DOMDocument.3.0");

Цитата(Greendrake @ 8.1.2006, 16:29

)

Иначе где же предел до которого поддерживать кроссбраузерность?

Для меня пока предел - последные версии Opera, IE и Mozilla smile

. Но и здесь приходится выпендриваться smile

Автор: Sardar 8.1.2006, 17:08

Цитата(Lixil @ 8.1.2006, 13:35

)

Создавать <tr>, править параметры и втыкать в него <td> через innerHTML не хочется.

Почему? Религия не позволяет? smile

Автор: Lixil 8.1.2006, 17:31

Цитата(Sardar @ 8.1.2006, 17:08

)

Создавать <tr>, править параметры и втыкать в него <td> через innerHTML не хочется.

Почему? Религия не позволяет? smile

только что в отчаянии попытался. Не вышло... Мозилла обрезает все td обрезает

Автор: Greendrake 8.1.2006, 18:21

Хм, тока что выяснил что Мозилла вот просто так не позволит loadXML заюзать. У них свои метОды:

http://developer.mozilla.org/en/docs/Migrate_apps_from_Internet_Explorer_to_Mozilla#XML_data_islands

Впрочем, в обоих случаях (и через loadXML и через мозилловский parseFromString) мы получаем объект типо DOM XML. Но аппендиться к имеющемуся HTML-дереву он не хочет!! smile

Вот тут я пока сдаюсь.

Кстати, innerHTML вроде тока у дивов мона перезаписывать, то что ИЕ это позволяет делать для TR и TD - это вольности.

Автор: Sardar 9.1.2006, 17:25

Звиняюсь не проверил. Действительно tbody, tr, table имеют read-only свойство innerHTML, поэтому только insertRow() методом таблицу править и можно. Мозилла 1.5 кстати хавает такое:

Код

function bla() {
  var tab=document.getElementById('test');
  tab.tBodies[0].innerHTML+='<tr id="43" parnt="42"><td>blah blah blah</td>\
  <td>blah blah blah</td></tr>';
}

Xотя это не правильно.

Также возможен такой финт ушами:

Код

<table id="test" border="1">
</table>
<script type="text/javascript">
<!--
function toTable(tb, code) {
    //используем div и span, т.к. отстойный ИЕ не понимает custom элементов, по крайней
    //мере мой ИЕ6.0 SP2
    code=code.replace(/<(\/?)tr/g, '<$01div').replace(/<(\/?)td/g, '<$01span').replace(/\sid=/g, ' id_t=');
    var tab=document.createElement('div');
    tab.innerHTML=code;
    var rows=getDirectChilds(tab);
    for(var i=0; i<rows.length; i++) {
        var r=tb.insertRow(tb.rows.length);
        if(rows[i].getAttribute('id_t')) r.setAttribute('id', rows[i].getAttribute('id_t'));
        var cls=getDirectChilds(rows[i]); 
        for(var j=0; j<cls.length; j++) {
            var c=r.insertCell(r.cells.length);
            c.innerHTML=cls[j].innerHTML
            if(cls[j].getAttribute('id_t')) c.setAttribute('id', cls[j].getAttribute('id_t'));
        }    
    }
    return tb;
}

//вот одна из больших ошибок DOM дизайна от W3C, используя 
//getElementsByTagName нельзя искать в прямых потомках
//пишем своё
function getDirectChilds(obj) {
  var ret=[];
  for(var i=0; i<obj.childNodes.length; i++)
     if(obj.childNodes[i].nodeType==1) ret.push(obj.childNodes[i]);
  return ret;
}

function bla() {
  toTable(document.getElementById('test'), '<tr id="43" parnt="42"><td>blah blah blah</td><td>blah blah blah</td></tr>');
}
//-->
</script>
<button onclick="bla()">Test</button>

Работает в ИЕ и Мозилле, но не пашет в Опера8.5 (при чём никаких ошибок в консоли, просто молча всё игнорирует).

Вообще советую отдавать инфу не как HTML, а в виде JSON (JS массива/обьекта с инфой).