如何将多个数据添加到<李>

Question

function addUserDataToDom(data) {
const li = document.createElement('li')
const userList = document.getElementById('user-list')
const userName = data.items[0].login
const id = data.items[0].id
const avatarUrl = data.items[0].avatar_url
li.innerHTML = userName
}

我必须将我的id和头像URL添加到<李>并附加到页面？谢谢

Answer 1

您可以使用.appendChild(childElement(将任何元素添加到另一个元素中。因此，如果您想添加"；李；对于您的文档主体，您可以这样做：

document.body.appendChild( li )

所以，为了达到你的要求，你应该这样做：

function addUserDataToDom(data) {
const li = document.createElement('li')
const userList = document.getElementById('user-list')
const userName = data.items[0].login
const id = data.items[0].id
const avatarUrl = data.items[0].avatar_url
// Create p elements to add your user data
const pUserName = document.createElement("p")
const pId = document.createElement("p")
const pAvatrUrl = document.createElement("p")

pUserName.innerText = userName
pId.innerText = id
pAvatrUrl.innerText = avatarUrl
li.appendChild( pUserName )
li.appendChild( pId )
li.appendChild( pAvatrUrl )
}

如您所见，所有数据都作为innerText添加到p元素中。最后，您必须将我们之前创建的p元素附加到li的元素中。