Firefox/XHTML: creating and appending nodes_问答_开发者

Firefox/XHTML: creating and appending nodes

开发者 https://www.devze.com 2023-01-14 17:15 出处：网络

I\'m trying to replace a bunch of innerHTML references in code with DOM-compliant node stuff. <html>

I'm trying to replace a bunch of innerHTML references in code with DOM-compliant node stuff.

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

Sure, the script isn't supposed to be below the body, but if I place it above, the javascript returns the error:

document.getElementsByTagName("body")[0] is undefined

since the body doesn't exist yet.

But as it is now, the javascript returns the even more esoteric error on the "appendChild" step:

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]

So what's the deal, here? You can repalce the myDiv.setAttribute and myDiv.appendChild lines with getElementById references and the result is the same.

Edit: sorry, the above errors are firefox ones, not chrome ones. The chrome error is: Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 on the myDiv.appendChild line. I don't get why myDiv wouldn't be on the DOM at this point, but chrome doesn't seem to think it is.

Edit 2: So, this line:

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

if made into

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

Will output text correctly. However, I want to know how to generate and append a chunk of html that will output as actual markup rather than pure text--something that can emulate innerHTML, essentially.

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

You need to create the <p> element and the text inside of it as distinct nodes. This should be:

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

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

That's assuming that you really want the <p>...</p> element. If you can do without it then simply create the text node and append that to myDiv.

Is there a reason you don't just put your code into an onload handler? It sounds as if it would solve most of your problems, if not all.

Right now, you're trying to modify the DOM tree before the browser has finished parsing the XHTML.