<!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?
<!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?
Share Improve this question edited Jun 5, 2021 at 17:20 Kinta asked Jun 5, 2021 at 17:02 KintaKinta 571 silver badge7 bronze badges 2-
1
console.log('water')will always log the string value "water", not the value of the variable called "water". – Pointy Commented Jun 5, 2021 at 17:04 -
1
Also, you don't really want to append that text node to the list anyway, you want to append your newly-created
<li>element. – Pointy Commented Jun 5, 2021 at 17:11
3 Answers
Reset to default 1First 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/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>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>
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 plete 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>.