DOM Manipulation: как создать текстовый узел по нажатию кнопки

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>

Я создал функцию createTextNode() для создания текстового узла onClick элемента <button>, однако он не работает должным образом.

Моя цель: onClick - Я хочу заменить элемент из списка, который я создал, используя функцию createTextNode при каждом нажатии <button>.

Вот JS Fiddle .

Заранее большое спасибо!

Answer 1

Большое спасибо всем! Я обновил это, но по какой-то причине createTextNode все еще не заполняется. Не уверен, что не так еще?

"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

Измените myButton.onlick на myButton.onclick и измените document.getElementId на document.getElementById. Кроме того, удалите пробел между ul и первым li, поскольку этот пробел считается дочерним узлом.

Это:

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

должно быть:

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

Вы можете упростить свой код, установив textContent первого li элемента ul вместо использования replaceChild.

Вы можете использовать document.querySelector('#myList li');, чтобы получить первый li внутри элемента с идентификатором myList, чтобы установить textContent из.

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

Добавление к тому, что @Dominic сказал:

Ваш JS-код должен выглядеть следующим образом:

"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]);
}

Ваш HTML-код должен выглядеть следующим образом:

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

Answer 4

Начните с вызова существующих методов:

• onclick вместо onlick

• document.getElementById вместо document.getElementId

• Используйте children вместо childNodes, так как childNodes включает в себя такие вещи, как комментарии к коду.

Вы можете упростить код, просто используя textContent, а не createTextNode -

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

Просмотрите консоль разработчика на наличие ошибок, чтобы увидеть, что вы сделали неправильно, и добавьте console.log, чтобы проверить, вызывается ли ваш обратный вызов при нажатии.

Пока вы на нем, измените свою кнопку myButton на фактическую <button>