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

Posted 2023-05-07

【中文标题】DOM 操作：如何在按钮单击时创建文本节点

【英文标题】：DOM Manipulation: How to Create a Text Node on Button Click

【发布时间】：2019-04-09 01:29:40

【问题描述】：

"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() 函数来创建<button> 元素的文本节点onClick，但是，它没有按预期工作。

我的目标： onClick - 每当单击 <button> 时，我想替换我使用 createTextNode 函数创建的列表中的一个项目。

这是JS Fiddle。

提前非常感谢！

【问题讨论】：

afaik on "lick" 事件未实现...尝试舔监视器以查看它是否有效 :)

请将您的代码添加到您的问题中，删除不必要的部分，而不仅仅是一个 JsFiddle 链接。

【参考方案1】：

从调用存在的方法开始：

onclick 而不是onlick

document.getElementById 而不是document.getElementId

使用 children 而不是 childNodes，因为 childNodes 包含代码 cmets 之类的内容。

您可以简化代码以仅使用 textContent 而不是 createTextNode -

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

查看您的开发者控制台中的错误以了解您做错了什么并添加 console.log 以检查您的回调是否在点击时被调用。

当您使用它时，将您的 myButton 更改为实际的 <button>

【参考方案2】：

补充@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>

【讨论】：

感谢大家的回复和花絮！显然我是 JS 新手，边走边学。

【参考方案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/

您可以通过设置ul 的第一个li 元素的textContent 而不是使用replaceChild 来简化代码。

您可以使用document.querySelector('#myList li');获取id为myList的元素内部的第一个li来设置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/

【参考方案4】：

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