在我的程序中，它列出了有序列表中的三个项目，它们都有id。然后，当你点击一个按钮时，它会提示你输入与你想要替换的列表上的编号项目相对应的数字。然后另一个提示询问您想用什么替换屏幕上的文本。我设置了if语句来检查输入的数字，并使用. replacechild将列表中的文本替换为提示符中输入的文本。我认为这将工作类似于如何使用。innerhtml在替换文本，但它不适合我。如有任何帮助，不胜感激。
这是我的代码。
function replaceItem()
{
var listNum = prompt("Which item are you replaceing 1, 2 or 3?");
var newItem = prompt("What is the name of the new item?");
if (listNum === 1) {
var item_one = document.getElementbyId("item1");
item_one.replaceChild(newItem, item_one);
}
if (listNum === 2) {
var item_two = document.getElementbyId("item2");
item_two.replaceChild(newItem, item_two);
}
if (listNum === 3) {
var item_three = document.getElementbyId("item3");
item_three.replaceChild(newItem, item_three);
}
}
HTML。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Island Scenario</title>
</head>
<body>
<h3>You are being sent to an island by yourself to survive for 1 week.</h3> <br>
<h3>You are allowed to bring the clothes on your back but are also being given three items.</h3> <br>
<h3>Out of the three items that you are initially given, you are allowed to switch out one of the items for something of your choice.</h3> <br>
<h4>Here are your current items.</h4>
<ul>
<li id="item1">Water Bottle</li>
<li id="item2">Lighter</li>
<li id="item3">Backpack</li>
</ul>
<p>Click the button to replace an item.</p>
<button onclick="replaceItem();">Click Me</button>
</body>
</html>
除了您尝试中的错别字之外，这不是使用replacecchild的方式。使用replaceChild，您需要指定要替换的HTML节点元素，以及要替换的新元素。这里有一个更简单的方法。只需使用元素的自然索引和innerText来替换您想要的索引。为了使它成为一个更好的示例，我给了UL一个className。
在这行中，document.querySelectorAll('.theList li')创建一个可迭代的HTMLElement列表，[listNum - 1]接受输入，减去1得到正确的LI元素。
document.querySelectorAll('.theList li')[listNum - 1].innerText = newItem;
function replaceItem() {
var listNum = prompt("Which item are you replaceing 1, 2 or 3?");
var newItem = prompt("What is the name of the new item?");
document.querySelectorAll('.theList li')[listNum - 1].innerText = newItem;
return
}<h3>You are being sent to an island by yourself to survive for 1 week.</h3> <br>
<h3>You are allowed to bring the clothes on your back but are also being given three items.</h3> <br>
<h3>Out of the three items that you are initially given, you are allowed to switch out one of the items for something of your choice.</h3> <br>
<h4>Here are your current items.</h4>
<ul class='theList'>
<li id="item1">Water Bottle</li>
<li id="item2">Lighter</li>
<li id="item3">Backpack</li>
</ul>
<p>Click the button to replace an item.</p>
<button onclick="replaceItem();">Click Me</button>replaceChild不是最好的方式来处理这种情况,因为替换innerText或实现textContent的节点会更简单,但是如果你想知道为什么它不工作,这是因为方法希望两个HTML节点作为参数,newNode和oldNode,因为你有文本节点在李元素,您需要让他们子节点的时候存在缺陷属性,同样适用于newNode，您需要使用document.createTextNode创建textNode。
除此之外，我建议您创建一个函数来处理遵循DRY的逻辑。原则，因为你在重复代码，唯一改变的是父元素的选择器:
function replaceItem() {
const listNum = prompt("Which item are you replaceing 1, 2 or 3?");
const newItem = document.createTextNode(prompt("What is the name of the new item?"))
replace(listNum, newItem)
}
function replace(n, newNode) {
const parent = document.getElementById(`item${n}`);
const oldNode = parent.childNodes[0]
parent.replaceChild(newNode, oldNode);
}<body>
<h3>You are being sent to an island by yourself to survive for 1 week.</h3> <br>
<h3>You are allowed to bring the clothes on your back but are also being given three items.</h3> <br>
<h3>Out of the three items that you are initially given, you are allowed to switch out one of the items for something of your choice.</h3> <br>
<h4>Here are your current items.</h4>
<ul>
<li id="item1">
Water Bottle
</li>
<li id="item2">
Lighter
</li>
<li id="item3">
Backpack
</li>
</ul>
<p>Click the button to replace an item.</p>
<button onclick="replaceItem();">Click Me</button>