为什么set属性在Javascript中不起作用？_Javascript

为什么set属性在Javascript中不起作用？

javascript

为什么set属性在Javascript中不起作用？,javascript,Javascript,代码1：试试看函数myFunction（）{ var y=document.createTextNode（“这是一个span元素”）； var x=document.createElement（“SPAN”）； x、儿童（y）； document.getElementById（“test”）.appendChild（x）.setAttribute（“样式”，“背景色：红色；”）； } 代码2： <html> <body> <div id="tes

代码1：


试试看
函数myFunction（）{
var y=document.createTextNode（“这是一个span元素”）；
var x=document.createElement（“SPAN”）；
x、 儿童（y）；
document.getElementById（“test”）.appendChild（x）.setAttribute（“样式”，“背景色：红色；”）；
}

代码2：

<html>
<body>
<div id="test"></div>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var y = document.createTextNode("This is a span element.");
  var x = document.createElement("SPAN");
 x.appendChild(y);

document.getElementById("test").appendChild(x).setAttribute("style", "background-color: red;"); 
}
</script>

</body>
</html>


函数myFunction（）{
var y=document.createTextNode（“这是一个span元素”）；
var x=document.createElement（“SPAN”）.appendChild（y）；
document.getElementById（“test”）.appendChild（x）.setAttribute（“样式”，“背景色：红色；”）；
}

为什么不为范围设置属性？在代码1中，我得到了所需的输出，即文本的红色背景，但在代码2中，我似乎没有得到

只想在一行中编写整个脚本。

返回附加的子脚本，而不是父脚本。因此

<script>
function myFunction() {
  var y = document.createTextNode("This is a span element.");
  var x = document.createElement("SPAN").appendChild(y);

document.getElementById("test").appendChild(x).setAttribute("style", "background-color: red;"); 
}
</script>

与

var x = document.createElement("SPAN").appendChild(y);

由于

（和

）引用了

TextNode

，因此在其上设置属性不会产生任何效果（只有元素可以具有属性）

只想在一行中写出整个脚本

这是不必要的，但是，您可以将任意多个语句放在一行中，只要它们是分开的


返回附加的子级，而不是父级。因此
<script>
function myFunction() {
  var y = document.createTextNode("This is a span element.");
  var x = document.createElement("SPAN").appendChild(y);

document.getElementById("test").appendChild(x).setAttribute("style", "background-color: red;"); 
}
</script>

与
var x = document.createElement("SPAN").appendChild(y);

由于x
（和y
）引用了TextNode
，因此在其上设置属性不会产生任何效果（只有元素可以具有属性）

只想在一行中写出整个脚本
这是不必要的，但是，您可以将任意多个语句放在一行中，只要它们是分开的
追加子节点的返回值是追加的子节点。在代码2中，x
是一个文本节点，而不是span
x
是一个文本节点，您不能在文本节点上调用setAttibute（…）
。appendChild
的返回值是追加的子节点。在代码2中，x
是文本节点，而不是span
x
是文本节点，您不能在文本节点上调用setAttibute（…）
。