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

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

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

Answer 2

Большое спасибо всем! Я обновил это, но по какой-то причине 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 3

+ Изменить 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 4

Добавление к тому, что сказал @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>