CODEWITHSUNDEEP
javascripthtmlvariablesappendchild
Kinta
Kinta

Reputation: 57

store a HTML element in a variable

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

Answers (3)

Zephyr
Zephyr

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

aliassce
aliassce

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

CertainPerformance
CertainPerformance

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

Related Questions