在 UL JS 中创建 LI - Javascript

在 Javascript 中，我们可以使用 DOM 操作来创建或修改HTML元素。在本篇文章中，我们将学习如何在 UL 中创建 LI 元素。

创建一个 UL 元素

首先，我们需要先创建一个UL元素。我们可以通过创建一个新的UL元素来实现。

const ulElement = document.createElement('ul');

解释：使用 document.createElement() 方法来创建一个新的UL元素，并将其赋值给名为 ulElement 的常量。

创建 LI 元素

接下来，我们需要创建一个新的LI元素，然后添加到UL元素中。我们可以通过使用 createElement() 方法来创建一个新的LI元素，并将其添加到UL元素中。

const liElement = document.createElement('li');
ulElement.appendChild(liElement);

解释：使用 document.createElement() 方法来创建一个新的LI元素，并将其赋值给名为 liElement 的常量。然后，使用 appendChild() 方法将LI元素添加到UL元素中。

添加文本内容

我们可以通过 textContent 属性来为LI元素添加文本内容。

liElement.textContent = 'Hello World';

解释：将 Hello World 赋值给 liElement 的 textContent 属性，即为LI元素添加文本内容。

完整代码示例

const ulElement = document.createElement('ul');

const liElement1 = document.createElement('li');
liElement1.textContent = 'Item 1';
ulElement.appendChild(liElement1);

const liElement2 = document.createElement('li');
liElement2.textContent = 'Item 2';
ulElement.appendChild(liElement2);

document.body.appendChild(ulElement);

解释：首先，我们创建了一个UL元素，并将其赋值给 ulElement 常量。然后，创建了两个LI元素并添加到UL元素中。最后，将UL元素添加到 document.body 中。

结论

在 Javascript 中创建LI元素，需要使用 document.createElement() 方法来创建新的元素。使用 appendChild() 方法将创建的元素添加到UL元素中。通过 textContent 属性为LI元素添加文本内容。 下面是完整的代码示例。

const ulElement = document.createElement('ul');

const liElement1 = document.createElement('li');
liElement1.textContent = 'Item 1';
ulElement.appendChild(liElement1);

const liElement2 = document.createElement('li');
liElement2.textContent = 'Item 2';
ulElement.appendChild(liElement2);

document.body.appendChild(ulElement);