Javascript Question regarding appendChild
Question
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>
6 answers
solution1
2 ACCPTED 2011-06-27 04:46:37
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"));
}
solution2
0 2011-06-27 04:46:53
document.getElementsByTagName返回一个元素列表（数组），而不是一个元素列表，您必须选择一个想要追加的元素（即node [0]）
solution3
0 2011-06-27 04:50:10
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>
solution4
0 2011-06-27 04:53:59
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!!!!
solution5
0 2011-06-27 05:23:48
> <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.
> <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.
solution6
-1 2011-06-27 04:49:24
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.