gpt4 book ai didi

javascript - replaceChild() 应该如何工作?

转载 作者:行者123 更新时间:2023-11-29 20:16:30 26 4
gpt4 key购买 nike

我正在自学 javascript,但不理解我从一些示例代码中获得的结果。为了简洁起见,我删减了代码。

html:

<body>
<h1>firstChild and lastChild Property Lab</h1>
<hr />
<form>
<label>Enter some text to add or replace in the OL element:</label>
<br />
<input type="text" name="input" size="50" />
<br />
<input type="button" value="Insert at Top"
onclick="prepend(this.form)" />
<input type="button" value="Append to Bottom"
onclick="append(this.form)" />
<br />
<input type="button" value="Replace First Item"
onclick="replaceFirst(this.form)" />
<input type="button" value="Replace Last Item"
onclick="replaceLast(this.form)" />
</form>
<ol id="myList">
<li>Initial Item 1</li>
<li>Initial Item 2</li>
<li>Initial Item 3</li>
<li>Initial Item 4</li>
</ol>
</body>

JavaScript:

// helper function for prepend() and append()
function makeNewLI(txt)
{
var newItem = document.createElement("LI");
newItem.innerHTML = txt;
return newItem;
}

function replaceFirst(form)
{
var newItem = makeNewLI(form.input.value)
var firstLI = document.getElementById('myList').firstChild.value;
document.getElementById('myList').replaceChild(newItem, firstLI);
}

我想如果我在文本框中输入一些文本并单击“替换第一项”按钮,列表中的第一项将被替换。但是,我第一次这样做时,它被添加到列表的顶部,现在列表有 5 个项目。然后,如果我更改文本框中的文本并再次单击“替换第一项”按钮,列表中的第一项将被更改。

我不明白为什么会这样。我希望只要单击按钮就会发生替换。我在 Ubuntu 10.04 上使用 Firefox 4。此外,如果我尝试替换列表中的最后一项,结果与我上面概述的相同。

谢谢,吉姆

最佳答案

这里有两处错误。首先,您选择 value而不是带有 var firstLI = document.getElementById('myList').firstChild.value; 的元素所以使用 var firstLI = document.getElementById('myList').firstChild;相反。

其次,信不信由你firstChildTextNode带有您当前标记的空文本。删除 <ol> 之间的空格第一个<li>所以它的 <ol><li>.... ,就像这里:

http://jsfiddle.net/niklasvh/5anyq/

关于javascript - replaceChild() 应该如何工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6441887/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com