Why set attribute is not working in Javascript?

Question

Code1:

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

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

Why attribute is not setting for span? In code 1 I am getting required output ie red background for text but in code 2 it seems I am not getting that.

Just want to write whole script in one line.

The return value of appendChild is the appended child node. In code 2, x is a text node, not a span. — Heretic Monkey
– Heretic Monkey, Commented Sep 22, 2020 at 12:36
x is a text node and you can't call setAttibute(...) on a text node. — Yousaf
– Yousaf, Commented Sep 22, 2020 at 12:38

Felix Kling · Accepted Answer · 2020-09-22 12:37:03Z

2

appendChild returns the appended child, not the parent. Hence

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

is the same as

var x = y;

Since x (and y) refer to a TextNode, setting an attribute on them won't have any effect (only elements can have attributes).

Just want to write whole script in one line.

That's unnecessary, however, you can put as many statements in a line as you want, as long as they are separated be ;.

answered Sep 22, 2020 at 12:37

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why set attribute is not working in Javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related