javascript - 缺少 创建逻辑

Question

我目前在 JS 开发中迈出了一小步，并编写了以下链接添加器:

const button = document.getElementById('button')
const listdiv = document.querySelector('.listdiv')

button.addEventListener('click', function(){
	let input = document.getElementById('text').value

	let createA = document.createElement('a')
	createA.setAttribute('href', input)
	let linkDescr = document.createTextNode(input)
	createA.appendChild(linkDescr)

	listdiv.appendChild(createA)
})

指令顺序如下:

获取文本框的值

创建<a>

设置<a>的链接说明

设置href

添加<a>的描述为<a>

然后添加所有 <a>到预先存在的Div ..

到目前为止一切顺利。但是，为什么当我们设置 href 时，会出现这样的情况？ ，它会自动添加到 <a> ，但是我们必须采取额外的步骤来添加链接的描述？不是 let linkDescr = document.createTextNode(input)应该自动添加描述吗？我的理论是命令的不同之处在于我们直接设置 <a> 的属性对于一个，但在另一个上创建一个变量；首先需要对这个变量做一些事情。变量本身不做任何事。请教育我的逻辑。也可以随意提出代码更改/建议/缺陷。谢谢

Answer 1

通常有多种方法可以做事。

例如，href 可以这样添加:

createA.href = input;

那么描述也可以作为属性添加。

createA.textContent = input;

API 只是为我们提供了选择。在某些情况下，附加文本节点可能更有意义，例如当您重新定位现有节点时。

就您而言，您正在创建一个新的文本节点。这是一个独立于 DOM 树任何其他部分的对象，因此在您将其插入到您想要的位置(例如新的 a 元素内)之前，它不会执行任何操作。