Question

我需要使用javascript的帮助。

实际上，我想将 列表项 添加到 HTML 中给出的 ul标签中，在 javascript 的帮助下。当我点击按钮时，它应该添加 ul标签中的元素。

Here is the code for HTML-


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

</head>
<body>
<input type="text" id="insertTheElement" placeholder="Enter Text Here..."> 
<br><br><br>
<button id="upperMostButton" onclick="listItem()">Add The Content</button>
<ul id="onlyThisOne">
</ul>
<script src="main.js"></script>
</body>
</html>

这里有JavaScript的代码-

var contentOfList=document.getElementById('insertTheElement').value;
function listItem(contentOfList){
var AddingListItem=document.createElement('li');
AddingListItem.innerText=contentOfList;
document.body.ul.appendChild(AddingListItem);
}

Answer 1

您的代码有一些问题，您使用输入参数编写了该函数，但未传递该参数，这可能导致未定义的项目附加到ul元素上。此外，您可以引用其id的ul术语，以避免将来在页面中可能包含多个ul元素时造成混乱，您可以尝试以下代码来满足您的要求。

function listItem(){
var contentOfList=document.getElementById('insertTheElement').value;
var AddingListItem=document.createElement('li');
AddingListItem.innerText=contentOfList;
document.getElementById('onlyThisOne').appendChild(AddingListItem);
}

<input type="text" id="insertTheElement" placeholder="Enter Text Here..."> 
<br><br><br>
<button id="upperMostButton" onclick="listItem()">Add The Content</button>
<ul id="onlyThisOne">
</ul>

Answer 2

document.body.ul没有任何意义。如果需要查找HTML Element的直接子代，则应使用.children。

此外，您还需要获取函数内部输入元素的值，因为它是值的一次性副本，而不是绑定变量。

请参见下面的代码段

function listItem(contentOfList) {
  var contentOfList = document.getElementById('insertTheElement').value;
  var AddingListItem = document.createElement('li');
  AddingListItem.innerText = contentOfList;
  document.getElementById('onlyThisOne').appendChild(AddingListItem);
}

<input type="text" id="insertTheElement" placeholder="Enter Text Here..." />
<button id="upperMostButton" onclick="listItem()">Add The Content</button>
<ul id="onlyThisOne">
</ul>

无法将元素添加到列表

2 个答案: