javascript - DOM 操作：如何在按钮单击时创建文本节点

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。

提前非常感谢！

score 1 · Accepted Answer

首先调用存在的方法：

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>

score 0 · Accepted Answer

更改myButton.onlick为myButton.onclick并更改document.getElementId为document.getElementById。此外，删除 theul和 first之间的空间，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。

您可以使用iddocument.querySelector('#myList li');来获取li元素内部的第一个myList来设置textContentof。

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

score 0 · Accepted Answer

添加到@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>

score 0 · Accepted Answer

非常感谢大家！我已经对此进行了更新，但是由于某种原因 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>

javascript - DOM 操作：如何在按钮单击时创建文本节点

4 回答 4

Related

Reference