Reputation: 57
<!DOCTYPE html>
<html>
<body>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>Click the button to append</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
let newLi = document.createElement("LI");
let textNode = document.createTextNode("Water");
let water = newLi.appendChild(textNode);
console.log(water); // water variable doesn't store the node object that represents the appended node
document.getElementById("myList").appendChild(water);
}
</script>
</body>
</html>
I have a question regarding return value of appendChild() method. The definition says the return value of appendChild() is "node object that represents the appended node". It is not a string data type. So, I just tried to store the return value in a variable (water variable in the code above). But, the variable just stores a string data type. Is that because variable cannot store a HTML element as its value?
Upvotes: 2
Views: 6709
Reputation: 2412
The appendChild does return the node appended. When you used createTextNode('water') you'll notice it also returns the text only. Thats cos a textNode is just text.
If you used appendChild with an html element instead of just the textNode, then it will return the complete element.
In your case newLi
holds
<li>Water</li>
If you had
let newLi = document.createElement("LI");
let newSpan = document.createElement("SPAN");
let textNode = document.createTextNode("Water");
let water = newSpan.appendChild(textNode);
let waterItem = newLi.appendChild(newSpan);
Here waterItem
is <span>Water</span>
.
Upvotes: 1
Reputation: 1197
In your code water references the text node but not the added LI element. So the result is "water". Also, you should add the newLi but not water into myList.
In the code below the return value of appendChild and newLi will be the same.
<script>
function myFunction() {
let newLi = document.createElement("li");
let textNode = document.createTextNode("Water");
newLi.appendChild(textNode);
var added= document.getElementById("myList").appendChild(newLi);
console.log(newLi);
console.log(added);
}
</script>
Output:
<li>Water</li>
<li>Water</li>
Upvotes: 1
Reputation: 371233
First make sure to log the actual variable, not the literal string 'water'
. After that:
The water
variable does append the created text node - if you do console.log(water)
and see just "Water"
, this is just the console trying to be "helpful" and display the contents of the node to you, instead of displaying a JavaScript object. But the value really does contain the object.
You can also use console.dir
instead of console.log
to get the console to display the object itself, instead of the HTML markup of the node.
function myFunction() {
let newLi = document.createElement("LI");
let textNode = document.createTextNode("Water");
let water = newLi.appendChild(textNode);
// console.log(water);
console.log(typeof water);
console.log(water instanceof Node);
}
<img src="https://i.sstatic.net/D1jym.png">
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>Click the button to append</p>
<button onclick="myFunction()">Try it</button>
Is that because variable cannot store a HTML element as its value?
There is absolutely no problem with storing an HTML element in a variable.
You can use the return value of appendChild
more to make your code more concise if you wanted, with the <li>
. You don't need to create a text node and save it in a variable, you can just assign to the .textContent
.
function myFunction() {
const newLi = document.getElementById("myList").appendChild(document.createElement("LI"));
newLi.textContent = 'water';
}
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>Click the button to append</p>
<button onclick="myFunction()">Try it</button>
Upvotes: 1