如何使用JS<ul></ul>创建一个<a></a>内部<li></li>所有内部

Question

我有这个ul，它是由HTML制作的，我想在里面用JS 创建元素

HTML代码：

<ul id="navbar__list">

</ul>

和JS代码：

var ul = document.getElementById("navbar__list");
var link1 = document.createElement("a");
var Li1 = document.createElement("li").appendChild(document.createElement("a"));
var sec1 = ul.appendChild(Li1)
link1.innerHTML = "Section 1"
link1.href ="#section1"

我得到的只是没有文本，作为一个初学者，我不知道出了什么问题

Answer 1

使用此：

var ul = document.getElementById("navbar__list");
var li = document.createElement("li");
ul.appendChild(li);
var link = document.createElement("a");
link.setAttribute('href', '#section1');
link.innerHTML = "Section 1";
li.appendChild(link);

Answer 2

您需要将link1传递到appendChild调用中。现在，您的代码正在调用createElement("a")两次，并将第二个未初始化的<a>传递到appendChild中，这不是您想要的。

你会想要这个：

• 将const用于不应重新分配的本地
• 防御：因为JavaScript不提供编译时类型安全或其他保证，所以最好始终检查您的假设，并在这些假设无效时向throw new Error检查。这极大地帮助了JavaScript中的调试("故障快速"(
• 在JS中构建DOM元素树时，我发现将每个元素放在自己的匿名范围({ }(中很有帮助，该匿名范围反映了DOM的结构。
  • 这也有助于防止元素的父级设置不正确的错误

const ul = document.getElementById("navbar__list");
if( !ul ) throw new Error( "Couldn't find navbar__list" );
{
const li = document.createElement("li");
ul.appendChild( li );
{
const aLink = document.createElement("a");
aLink.textContent = "Section 1";
aLink.href        = "#section1";
li.appendChild( aLink );
}
}

---

令人惊讶的是，DOM API有点冗长：没有简洁的方法来创建具有属性和内部内容集的元素，相反，我们需要显式调用createElement和appendChild。已经提出了一些使用编译时技术的替代方案，如JSX，作为一种更轻量级的替代方案——您可以使用这样的辅助函数：

/**
@param {string} tagName
@param {[string, string][]} attributes - Array of 2-tuples
@param {HTMLElement | HTMLElement[] | string} content - Either: one-or-many HTML elements, or string textContent
*/
function create( tagName, attributes, content ) {

const e = document.createElement( tagName );

for( let i = 0; i < attributes.length; i++ ) {
const pair = attributes[i];

e.setAttribute( pair[0], pair[1] );
}
if( typeof content === 'string' ) {
e.textContent = content;
}
else if( Array.isArray( content ) ) {
for( const child of content ) {
e.appendChild( child );
}
}
else if( typeof content === 'object' && content !== null ) {
e.appendChild( content );
}
return e;
}

像这样使用：

const ul = document.getElementById("navbar__list");
if( !ul ) throw new Error( "Couldn't find navbar__list" );
{
ul.appendChild(
create( "li", [], create( "a", [ [ "href", "#section1" ] ], "Section 1" ) )
);
}