createElement and appendChild in JavaScript

Question

I am trying to figure out why the createElement and appendChild aren't working. I believe I've got my code correct so I'm not too sure why it's not working... (I am using IE 10)

CODE UPDATED

JavaScript File:

var myObj = {

   firstName: "John",
   lastName: "Smith"
};

HTML File:

<!DOCTYPE html />
<html>
<title>The Data Structure</title>
<body>

<script type="text/javascript" src="TheData.js">

var theElement = document.createElement('p');
var theText = document.createTextNode(myObj.firstName);
theElement.appendChild(theText);
document.body.appendChild(theElement);

</script>
</body>
</html>

T.J. Crowder · Accepted Answer · 2013-08-10 08:41:33Z

2

The issue is that you both supply a src on your script tag and provide content within it. That's invalid, you can do one or the other, not both. Most browsers will use the src and disregard the content.

Separate from that, creating an element doesn't put it in the DOM. You have to add it somewhere (via appendChild or insertBefore or similar).

So perhaps:

<script src="TheData.js"></script>
<!-- Note: Two separate script elements -->
<script>
var theElement = document.createElement('p');
var theText = document.createTextNode(myObj.firstName);
theElement.appendChild(theText);
document.body.appendChild(theElement); // <==== Note: Adding `the Element` to the DOM
</script>

edited Aug 10, 2013 at 8:41

answered Aug 9, 2013 at 22:42

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bfavaretto Over a year ago

A small detail noted by Crazy Train: it should be myObj.firstName (lowercase f) in the line that creates the text node.

bfavaretto · Accepted Answer · 2013-08-09 22:32:26Z

2

You never append theElement to the document! Add one more line at the end:

document.body.appendChild(theElement);

As a side note, what's this immediately invoked function for?

(function () {
return myObj.firstName;
}());

It does nothing!

answered Aug 9, 2013 at 22:32

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

2 Comments

mwilson Over a year ago

Yea that anonymous function will turn into something. Just a placeholder for now. Kind of one of those things I started on but didn't finish.

user2437417 Over a year ago

Also, myObj.FirstName !== myObj.firstName

Collectives™ on Stack Overflow

createElement and appendChild in JavaScript

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest