Firefox / XHTML: создание и добавление узлов - PullRequest
Новая
       22

Firefox / XHTML: создание и добавление узлов

1 голос
/ 02 сентября 2010

Я пытаюсь заменить кучу ссылок innerHTML в коде на DOM-совместимые ноды. 

<html>
    <body>hehe</body>
    <script type="text/javascript">
        var myDiv = document.createElement('div');
        myDiv.setAttribute('id', 'myDivID');
        document.getElementsByTagName('body')[0].appendChild(myDiv);
        var textNode = '<p>This will be dynamically generated.</p>';
        myDiv.appendChild(textNode);
    </script>
</html>

Конечно, сценарий не должен быть ниже тела, но если я помещу его выше, javascript возвращает ошибку:

document.getElementsByTagName("body")[0] не определено

так как тело еще не существует.

Но, как и сейчас, JavaScript возвращает еще более эзотерическую ошибку на шаге "appendChild": 

uncaught exception:
[Exception... "Could not convert JavaScript argument arg 0 [nsIDOMHTMLDivElement.appendChild]"
nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"
location: "JS frame :: .....TestStuff/wut.jsp :: <TOP_LEVEL> :: line 8"
data: no]

Так в чем же дело, здесь? Вы можете перекомпилировать строки myDiv.setAttribute и myDiv.appendChild ссылками getElementById, и результат будет таким же.

Редактировать: извините, вышеупомянутые ошибки Firefox, а не Chrome. Ошибка Chrome: Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 в строке myDiv.appendChild. Я не понимаю, почему myDiv не будет в DOM на данный момент, но, похоже, Chrome не думает, что это так.

Редактировать 2: Итак, эта строка: 

var textNode = '<p>This will be dynamically generated.</p>';

если сделано в 

var textNode = document.createTextNode('< p>This will be dynamically generated.< /p>');

Будет выводить текст правильно. Тем не менее, я хочу знать, как генерировать и добавлять фрагмент html, который будет выводиться как фактическая разметка, а не как чистый текст - что может эмулировать innerHTML, по сути.

Ответы [ 2 ]

2 голосов
/ 02 сентября 2010 
var textNode = '<p>This will be dynamically generated.</p>';
myDiv.appendChild(textNode);

Вам необходимо создать элемент <p> и текст внутри него как отдельные узлы. Это должно быть: 

var paragraph = document.createElement('p');
var textNode  = document.createTextNode('This will be dynamically generated.');

paragraph.appendChild(textNode);
myDiv    .appendChild(paragraph);

Это предполагает, что вы действительно хотите элемент <p>...</p>. Если вы можете обойтись без него, просто создайте текстовый узел и добавьте его к myDiv.

1 голос
/ 02 сентября 2010

Есть ли причина, по которой вы не просто помещаете свой код в обработчик onload? Звучит так, как будто это решит большинство ваших проблем, если не все.

В данный момент вы пытаетесь изменить дерево DOM, прежде чем браузер завершит анализ XHTML.

...