简体   繁体   English

有关appendChild的Javascript问题

[英]Javascript Question regarding appendChild

Im just learning javascript and I'm just wondering why this doesn't work. 我只是学习javascript,我只是想知道为什么这行不通。 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>

you should pass new node as argument to appendChild method, like here: 您应该将新节点作为参数传递给appendChild方法,例如:

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

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

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>
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!!!! 尝试以上方法!!!

> <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. 正如其他人指出的那样, getElemetsByTagName返回一个活动的NodeList ,它具有length属性,并且其成员可以通过索引访问。 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: 可以使用以下命令将文本元素附加到NodeList中的第一个节点:

  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. 但是,在尝试调用其方法之一之前首先查看node[0]存在更加安全。

> <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. 浏览器显示noscript元素的事实并不一定意味着该浏览器不支持javascript。 The description of a noscript element includes: noscript元素的描述包括:

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

W3C, HTML4.01 , §18.3.1 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". 这里的type属性更合适的值是“ button”。 And the XML-style closing tag is unnecessary. 而且,不需要XML样式的结束标记。

document.getElementsByTagName return 'array' of fetched doms rather than one dom. document.getElementsByTagName返回获取的Dom的“数组”,而不是一个dom。 so you need to specify single dom with for loop of this array or sth likely. 因此,您需要使用此数组或sth的for循环指定单个dom。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM