关于appendChild的Javascript问题

时间:2011-06-27 04:43:47

标签: javascript html dom

我只是在学习javascript,我只是想知道为什么这不起作用。我创建了一个按钮,当它被点击时,我分配了一个函数,该函数应该在我的所有段落中添加一些文本。我不知道为什么它不起作用:

<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 个答案:

答案 0 :(得分:2)

你应该将新节点作为参数传递给appendChild方法,如下所示:

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

答案 1 :(得分:0)

document.getElementsByTagName返回一个元素列表(数组)而不是一个元素,你必须选择你想要追加的元素(即node [0])

答案 2 :(得分:0)

试试这个

<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>

答案 3 :(得分:0)

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

尝试以上方法!!!!

答案 4 :(得分:0)

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

语言属性已弃用十多年,不应使用。

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

正如其他人所指出的, getElemetsByTagName 返回一个实时NodeList,它有一个length属性,其成员可以通过索引访问。请注意,虽然它是类似数组,但它不是数组。

可以使用以下命令将文本元素附加到NodeList中的第一个节点:

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

然而,在尝试调用其中一种方法之前,先了解node[0]是否存在会更安全。

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

浏览器显示noscript元素这一事实并不一定意味着浏览器不支持javascript。 noscript元素的描述包括:

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();" />

具有提交类型的输入旨在以表格形式提供并用于提交表单。这里type属性的更合适的值是“button”。并且XML样式的结束标记是不必要的。

答案 5 :(得分:-1)

document.getElementsByTagName返回获取的doms而不是一个dom的'array'。所以你需要用这个数组的for循环指定单个dom,或者可能。