CODEWITHSUNDEEP
javascripthtmldom
Larry Hughes
Larry Hughes

Reputation: 15

Javascript Question regarding appendChild

Im just learning javascript and I'm just wondering why this doesn't work. I've created a button and when it is clicked I assigned a function which is supposed to append some text to all my paragraphs. I don't know why it doesn't work:

<html>
<head>
<title>javascript test</title>
</head>
<body>
<script language="javascript" type="text/javascript">

function appendStuff(){
 var node = document.getElementsByTagName("P");
 node.appendChild.createTextNode('Here's some text');

 return true;
 }

</script>
<noscript>
Your browser doesn't support javascript.
</noscript>

<input type="submit" value="click me" onclick="appendStuff();" />

<p>
This is the first paragraph.
</p>

<p>
This is the second paragraph.
</p>

<p>
This is the third paragraph.
</p>

</body>
</html>

Upvotes: 1

Views: 347

Answers (6)

RobG
RobG

Reputation: 147403

> <script language="javascript"
> type="text/javascript">

The language attribute has been deprecated for over a decade, it should not be used.

> function appendStuff(){   var node = document.getElementsByTagName("P");  
>   node.appendChild.createTextNode('Here's some text');
>   return true;
> }

As others have pointed out, getElemetsByTagName returns a live NodeList, which has a length property and whose members can be accessed by index. Note that while it is array-like, it is not an array.

A text element can be appended to the first node in the NodeList using:

  node[0].appendChild(document.createTextNode("Here's some text"));

However it is much safer to first see if node[0] exists before attempting to call one of its methods.

> <noscript> Your browser doesn't
> support javascript. </noscript>

The fact that a browser displays a noscript element doesn't necessarily mean that the browser doesn't support javascript. The description of a noscript element includes:

The NOSCRIPT element allows authors to provide 
alternate content when a script is not executed.

W3C, HTML4.01, §18.3.1

> <input type="submit" value="click me"
> onclick="appendStuff();" />

An input with a type of submit is intended to be in a form and be used to submit the form. A more appropriate value for the type attribute here is "button". And the XML-style closing tag is unnecessary.

Upvotes: 0

IvanGL
IvanGL

Reputation: 767

you should pass new node as argument to appendChild method, like here:

var nodes = document.getElementsByTagName("P");
for(var i=0; i<nodes.length; i++) {
   nodes[i].appendChild(document.createTextNode("Here's some text"));
}

Upvotes: 2

gmhk
gmhk

Reputation: 15940

function appendStuff(){
     var node = document.getElementsByTagName("P");
     var txt = 'Here is some text';
     var newT = document.createTextNode(txt);
    node.appendChild(newT);
     return true;
     }

Try the above method!!!!

Upvotes: 0

mymotherland
mymotherland

Reputation: 8226

Try this 

<html>
<body>
<script language="JavaScript">
function function11() {
   var myNode = document.createTextNode("New Text Node");
   document.body.appendChild(myNode);
}
</script>
<button onclick="function11();">Create text node</button>
</body>
</html>

Upvotes: 0

james li
james li

Reputation: 184

document.getElementsByTagName return 'array' of fetched doms rather than one dom. so you need to specify single dom with for loop of this array or sth likely.

Upvotes: -1

LeleDumbo
LeleDumbo

Reputation: 9340

document.getElementsByTagName returns a list (array) of element instead of just one, you have to pick up the one you'd like to append (i.e. node[0])

Upvotes: 0

Related Questions