How do I run javascript examples from sites like stackoverflow?

Question

What needs to be added inorder to run an example like what is found on here: Converting HTML string into DOM elements? in a basic HTML document?

Specifically I'm referring to the code:

var xmlString = "<div id='foo'><a href='#'>Link</a><span></span></div>"
  , parser = new DOMParser()
  , doc = parser.parseFromString(xmlString, "text/xml");
doc.firstChild // => <div id="foo">...
doc.firstChild.firstChild // => <a href="#">...

I have tried:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
var xmlString = "<div id='foo'><a href='#'>Link</a><span></span></div>"
  , parser = new DOMParser()
  , doc = parser.parseFromString(xmlString, "text/xml");
doc.firstChild;
doc.firstChild.firstChild;
</script>
</body>
</html>

As a beginner to javascript, a complete html copy and paste solution would be good to see how precisely it fits in.

You have posted an incomplete example (it was posted as example code that is missing actions). — Oded, May 28 '12 at 17:59
Do you really want a general answer to your title question (likely to be closed) or only an explanation of that specific example code? — Bergi, May 28 '12 at 18:06
As a beginner to javascript I often see javascript examples posted like above, it seems they are always missing something that I need to add in to make it run. I'm sure it is very simple, but I just can't work it out. — fakeguybrushthreepwood, May 28 '12 at 18:26

score 1 · Answer 1 · answered May 28 '12 at 18:06

1

I don't know for sure if this is what you want, but if you want to run jQuery (or javascript) online, you can use http://jsfiddle.net/, but make sure when you're running a script, you have all the referenced variables and elements.

answered May 28 '12 at 18:06

aldux

2,774
2
25
36

Jonathan Lonowski · Answer 2 · 2012-05-28T19:08:56.413

1

The // => comments are just trying to describe the value you'd get from the properties -- in each case, a DOM Object representing part of the markup.

It's up to you what you want to do with those values. For guidance, see: https://developer.mozilla.org/en/DOM

But, you could simply output them with console.log:

console.log(doc.firstChild);
console.log(doc.firstChild.firstChild);

Or displaying their details in an element on the page:

document.getElementById('foo').innerHTML = doc.firstChild.nodeName;

Or, any of a plethora of other tasks.

For context:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
    </head>
    <body>
        <div id="foo"></div>

        <script>
            var xmlString = "<div id='foo'><a href='#'>Link</a><span></span></div>"
              , parser = new DOMParser()
              , doc = parser.parseFromString(xmlString, "text/xml");

            console.log(doc.firstChild);
            console.log(doc.firstChild.firstChild);

            document.getElementById('foo').innerHTML = doc.firstChild.nodeName;
        </script>
    </body>
</html>

edited May 28 '12 at 19:08

answered May 28 '12 at 18:08

Jonathan Lonowski

121,453
34
200
199

Would it be possible to see a complete html dump for this with the code above so I can see how it fits in? – fakeguybrushthreepwood May 28 '12 at 18:26
@peteskiii Sure. Edited my answer to include it. – Jonathan Lonowski May 28 '12 at 18:48
I get 'undefined' when I see this on the screen. – fakeguybrushthreepwood May 28 '12 at 18:52
@peteskiii Sorry. That was a poor example. `innerHTML` isn't available when parsing as `"text/xml"`. I've updated the examples to demonstrate with `nodeName`, instead. – Jonathan Lonowski May 28 '12 at 19:08
when I run this I only see 'div' on the screen. Sorry! – fakeguybrushthreepwood May 29 '12 at 08:11
@peteskiii That's the expected output, as that's the `nodeName` of `doc.firstChild`. It's perhaps not as useful of an example as `innerHTML`, but XML nodes don't appear to expose their markup. – Jonathan Lonowski May 29 '12 at 17:23

How do I run javascript examples from sites like stackoverflow?

2 Answers2