DOM Manipulation: How to Create a Text Node on Button Click

Question

"use strict";

var myButton = document.getElementById("myButton");

myButton.onclick = function (){
 var newNode = document.createTextNode("Blueberry");
 var item = document.getElementId("myList").childNodes[0]; 
  console.log(item);
  item.replaceChild(newNode,item.childNodes[0]);

}

#myButton {
  color: blue;
  border: 1px solid black;
  width: 200px;
  text-align: center;
} 

<h1>Learning the Basics of How DOM Functions</h1>

<h3>
What is DOM?
</h3>

<p id="intro">
DOM stands for "Document Object Model" and it is a plaform (as well as a language-netural interface) that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
<br>
<br>
Visit <a href="https://www.w3schools.com/js/js_htmldom.asp">this page </a> if you want a further explanation.
</p>

<h3>
Test Your Knowledge:
</h3>
<p>
The purpose of this homework exercise is to introduce you to some examples of DOM manipulation within the HTML. Let's get started!
</p>

<h4>
Part 1
</h4>

<p>
Write some lines of code so that when you click on the button below, one of the values in the list gets replaced without another value.
<br>

<button type="button" id="myButton">Click This to Replace</button>

<ul id="myList">
  <li>
    Apple
  </li>
  <li>
    Watermelon
  </li>
  <li>
    Pumpkin
  </li>
  <li>
    Strawberry
  </li>
  <li>
    Kiwi
  </li>
</ul>
<b>Replace the item that doesn't belong with something that does.</b>
</p>

I created a createTextNode() function to create a text node onClick of a <button> element, however, it's not working as expected.

My Goal: onClick - I want to replace an item from the list I've created using the createTextNode function whenever the <button> is clicked.

Here's the JS Fiddle.

Thanks so much in advance!

Answer 1

Thanks so much everyone! I've updated to this, however for some reason the createTextNode is still not populating. Not sure what is wrong still?

"use strict";

var myButton = document.getElementById("myButton");

myButton.onclick = function (){
    var newNode = document.createTextNode("Blueberry");
    var item = document.getElementById("myList").childNodes[3]; 
    item.replaceChild(newNode,item.childNodes[3]);

}

HTML

<p>
Write some lines of code so that when you click on the button below, one of the values in the list gets replaced without another value.
<br>
<br>
<button type="button" id=myButton>Click This to Replace</button>

<ul id="myList">
  <li>Apple</li>
  <li>Watermelon</li>
  <li>Pumpkin</li>
  <li>Strawberry</li>
  <li>Kiwi</li>
</ul>
<b>Replace the item that doesn't belong with something that does.</b>
</p>

Answer 2

Start by calling methods which exist:

• onclick instead of onlick

• document.getElementById instead of document.getElementId

• Use children rather than childNodes since childNodes includes things like code comments.

You can simplify the code to just use textContent rather than createTextNode -

var item = document.getElementById("myList").children[0];
item.textContent = 'Blueberry'; // or innerHTML will do

Look at your developer console for errors to see what you've done wrong and add console.log's to check if your callback is being called on click.

While you're at it change your myButton to an actual <button>

Answer 3

Change myButton.onlick to myButton.onclick and change document.getElementId to document.getElementById. Also, remove the space between the ul and the first li because that space is being counted as a child node.

This:

<ul>
<li>
...
</li>
</ul>

should be:

<ul><li>
...
</li>
</ul>

"use strict";

var myButton = document.getElementById("myButton");

myButton.onclick = function (){
 var newNode = document.createTextNode("Blueberry");
 var item = document.getElementById("myList").childNodes[0];
  item.replaceChild(newNode,item.childNodes[0]);

}

#myButton {
  color: blue;
  border: 1px solid black;
  width: 200px;
  text-align: center;
} 

<h1>Learning the Basics of How DOM Functions</h1>

<h3>
What is DOM?
</h3>

<p id="intro">
DOM stands for "Document Object Model" and it is a plaform (as well as a language-netural interface) that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
<br>
<br>
Visit <a href="https://www.w3schools.com/js/js_htmldom.asp">this page </a> if you want a further explanation.
</p>

<h3>
Test Your Knowledge:
</h3>
<p>
The purpose of this homework exercise is to introduce you to some examples of DOM manipulation within the HTML. Let's get started!
</p>

<h4>
Part 1
</h4>

<p>
Write some lines of code so that when you click on the button below, one of the values in the list gets replaced without another value.
<br>

<div id = "myButton">Click This to Replace</div>

<ul id="myList"><li>
    Apple
  </li>
  <li>
    Watermelon
  </li>
  <li>
    Pumpkin
  </li>
  <li>
    Strawberry
  </li>
  <li>
    Kiwi
  </li>
</ul>
<b>Replace the item that doesn't belong with something that does.</b>
</p>

JSFiddle: http://jsfiddle.net/vanebwds/

You can make your code simpler by setting the textContent of the first li element of the ul instead of using replaceChild.

You can use document.querySelector('#myList li'); to get the first li inside the element with the id of myList to set the textContent of.

"use strict";

var myButton = document.getElementById("myButton");

myButton.onclick = function (){
 var item = document.querySelector('#myList li');
  //gets the first li contained by #myList
  item.textContent = "Blueberry";

}

#myButton {
  color: blue;
  border: 1px solid black;
  width: 200px;
  text-align: center;
} 

<h1>Learning the Basics of How DOM Functions</h1>

<h3>
What is DOM?
</h3>

<p id="intro">
DOM stands for "Document Object Model" and it is a plaform (as well as a language-netural interface) that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
<br>
<br>
Visit <a href="https://www.w3schools.com/js/js_htmldom.asp">this page </a> if you want a further explanation.
</p>

<h3>
Test Your Knowledge:
</h3>
<p>
The purpose of this homework exercise is to introduce you to some examples of DOM manipulation within the HTML. Let's get started!
</p>

<h4>
Part 1
</h4>

<p>
Write some lines of code so that when you click on the button below, one of the values in the list gets replaced without another value.
<br>

<div id = "myButton">Click This to Replace</div>

<ul id="myList"><li>
    Apple
  </li>
  <li>
    Watermelon
  </li>
  <li>
    Pumpkin
  </li>
  <li>
    Strawberry
  </li>
  <li>
    Kiwi
  </li>
</ul>
<b>Replace the item that doesn't belong with something that does.</b>
</p>

JSFiddle: http://jsfiddle.net/b4whmup5/

Answer 4

Adding to what @Dominic said:

Your JS code should look like this:

"use strict";

var myButton = document.getElementById("myButton");

myButton.onclick = function () {
    var newNode = document.createTextNode("Blueberry");
    var item = document.getElementById("myList").childNodes[0]; 
    item.replaceChild(newNode,item.childNodes[0]);
}

Your HTML Code should look like this:

<h1>Learning the Basics of How DOM Functions</h1>

<h3>What is DOM?</h3>

<p id="intro">
DOM stands for "Document Object Model" and it is a plaform (as well as a language- 
netural interface) that allows programs and scripts to dynamically access and update 
the content, structure, and style of a document.
<br>
<br>
Visit <a href="https://www.w3schools.com/js/js_htmldom.asp">this page </a> if you 
want a further explanation.
</p>

<h3>Test Your Knowledge:</h3>
<p>
The purpose of this homework exercise is to introduce you to some examples of DOM 
manipulation within the HTML. Let's get started!
</p>

<h4>Part 1</h4>

<p>
Write some lines of code so that when you click on the button below, one of the 
values in the list gets replaced without another value.
</p>
<br>

<button type="button" id="myButton">Click This to Replace</button>

<ul id="myList">
  <li>Apple</li>
  <li>Watermelon/li>
  <li>Pumpkin</li>
  <li>Strawberry/li>
  <li>Kiwi</li>
</ul>
<b>Replace the item that doesn't belong with something that does.</b>