2

In the w3school site there are two tutorials:

HTML DOM

XML DOM

I want to know the releationship of them, since I think the HTML DOM is one kind of XML DOM.

So the methods/properties in the XML DOM can be used in HTML DOM, and the HTML DOM may own some special methods.

However, when I try to use this:

HTML:

<span id="con">xxx</span>

var a=document.createElement("a");
document.getElementById("con").appendChild(a);

It does not work in IE.

So I wonder what is the problem?

barto90
  • 679
  • 1
  • 9
  • 27
hguser
  • 35,079
  • 54
  • 159
  • 293

3 Answers3

2

You have an error in your code, it misses an 'e':

document.getElementById('con').appendChild(a);
OverLex
  • 2,501
  • 1
  • 24
  • 27
2

appendChild() is buggy in IE

Community
  • 1
  • 1
powtac
  • 40,542
  • 28
  • 115
  • 170
2

DOM refers to a tree you make out of XML. The tree is made up of nodes. For example:

<a x="bb">
   <b> text </b>
</a>

turns into a tree with three nodes: one for a and one for b and one for the text. The nodes contains the attributes as fields. So the a node will have a field: x="bb".

HTML is (practically) XML so you can build a DOM tree out of it. HTML is just XML with predefined elements. I.e., you can't use whatever names you want for your elements (you can't use <children>, <ball>,...) you can use the predefined names (a, span, div, ...).

I say "practically" because HTML is usually broken XML (for example using <br> is wrong XML. you should use <br /> instead). The browsers have smart parsers that know how to overcome this broken XML and make a usuable tree out of the HTML.

Guy
  • 14,178
  • 27
  • 67
  • 88
  • Thanks,but in xml,there is a method "appendChild" for the Element,but why it does not work in my example? Also,in the xml dom,there is an class Element. for example, document.getElementById("xx") will return the element,I want to know what is the return type when I use the docxx.getxxId() in html? – hguser Jun 20 '11 at 13:45
  • what do you mean by `docxx.getxxId()`? You are right, the nodes in the DOM tree created from HTML have methods I didn't specify. `node.getElementById(x)` returns a child node that has `id` attribute equals `x`. The type of `node` is `Element` or `HtmlElement` or more specifically a certain type of Element, for example `AnchorElement`. `document` is the root of the DOM tree so doing `document.getElementById()` scans the whole HTML. – Guy Jun 20 '11 at 13:57
  • Then can we use document.getElementById("xx').getElementById("xx")? The former return an Element(Node),then call the getElementById again. – hguser Jun 20 '11 at 14:01
  • sorry again. Looking at: https://developer.mozilla.org/en/DOM/element it appears you can't. `getElementById` is a method of `document`. But you can use `getElementByTagName` on nodes – Guy Jun 20 '11 at 14:06
  • 1
    Note that while `
    ` is incorrect XHTML, it is correct HTML. See the "void elements" section of the HTML5 spec: http://dev.w3.org/html5/html-author/#void-elements     – Matthew Jul 06 '12 at 22:59