I am working on an api project, and I need to gather the contents of the li using my javascript. There can be multiple of these li‘s
My html (just a small section)
<div>
<button id="roomListButton">Click me to see what rooms your in</button>
<ul id="roomsList">
</ul>
</div>
My javascript (not everything)
const roomsListR = document.querySelector('#roomsList');
const delRoomButTEMPLATE = document.createElement('button')
delRoomButTEMPLATE.classList.add('deleteRoomBtn');
delRoomButTEMPLATE.innerHTML = `Leave this room`;
const fetchRoomsAndProcess = async (event) => {
console.log('fetching rooms')
event.preventDefault();
const response = await fetch('/getRooms');
const jsonResponse = await response.json();
const result = jsonResponse.result
// Preparatory clean of the rooms list
roomsListR.innerHTML = ``
for (let i = 5; i != 0; i--) {
let currentRoom = result.splice(0, 1)
let currentRoom2 = currentRoom[0]
let currentRoom3 = currentRoom2['roomname']
console.log('currentRoom3 : ', currentRoom3);
// Now do the stuff with currentRoom
const li = document.createElement('li');
li.innerHTML = `${currentRoom3} ${delRoomButTEMPLATE.outerHTML}`
li.addEventListener('click', (event) => {
console.log('button clicked.')
const parent = event.target.parentNode
console.log(parent.innerHTML)
})
roomsListR.appendChild(li)
if (result.length == 0) {
break
}
}
}
The syntax: li.textContent does not work as it returns the text content of the button element inside it as well. li.innerText for some reason does the same thing. And li.innerHTML includes the tag which is not what I want.
Is there a shortcut for retrieving just the text in the node, not including any tags or anything inside of those tags?
