Javascript js:<；输入>；在删除并重新添加到DOM后，字段似乎在内存中出现了两次

我在html中有一个

元素，在一个按钮内：

HTML:

现在一切都按预期进行：当我现在说

timeInput.value=100

时，显示的值跳到

100

但是，只要我从DOM中删除

timeInput

，然后（稍后）再次添加它，它就好像我有两个

元素具有相同的

ìd

这就是我删除元素的方式（即使使用

.removeChild（）

，它也是一样的）：

以及我如何重新添加它（无论我是否使用

appendChild

或

append

）：

现在，如果我说

timeInput.value=100

GUI不会更新

timeInput.value

=100，但

document.getElementById（'TimeInputButton'）。value

返回变量绑定时输入字段的默认值

const timeInput=document.getElementById（'TimeInputButton'）

为什么我的内存中有2个
元素？
这无疑与
元素中不允许交互内容这一事实有关。虽然浏览器允许这样做，并尽其所能使有缺陷的封装工作，但不适当地使用HTML会产生后果
 使用
removeChild
时，是否存储结果？如果将返回值赋给某个对象，该元素将保留在内存中。您是否尝试过不分配它？这无疑与
元素中不允许交互内容这一事实有关。虽然浏览器允许这样做，并尽其所能使有缺陷的封装工作，但不适当地使用HTML会产生后果。好吧，不管怎样，然后我从按钮中取出输入@RandyCasburn你能复制一下你的评论作为回答吗？
<button class="green button " id="playPause"> &nbsp;Play in&nbsp;&nbsp; <input type="text" 
 id="timeInputInButton" maxlength="3" size="2" value="3" 
 style="text-align:right; padding-bottom:1px; padding-top:1px; padding-right:2px; margin-bottom:0px; margin-top:0px;" > 
 sec </button> 

const timeInput = document.getElementById('timeInputInButton');

const playPauseButton = document.getElementById('playPause');
playPauseButton.innerHTML = "Pause";

playPauseButton.appendChild(timeInput);