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

时间：2018-11-05 16:43:12

标签： javascript createtextnode 

armv7
"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函数创建的列表中的项目。

这里是JS Fiddle。

非常感谢！

4 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

将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');来获取ID为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/

答案 2 :(得分：0)

加上@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>

答案 3 :(得分：0)

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