How to get text inside another element in li list

I have a li tag that contain p tag, inside p contain some span tag

I want to get the text of the "role" in <span >{{role}}</span>

I'm trying

Array.prototype.slice.call(document.querySelectorAll('ul[data-tag="userJoinedList"] li')).forEach(function(element) {
        console.log(element.innerHTML)
}

<ul data-tag="userJoinedList">
    {{#users}}
       <li >
           <p>
              <span >{{username}}</span> 
              <span >{{role}}</span>
           </p>
       </li>
    {{/users}}
</ul>

CodePudding user response：

Why not just use a selector?

document.querySelectorAll('ul[data-tag="userJoinedList"] li p span.tag')
    .forEach(function(element) { 
        console.log(element.innerHTML)
    }
)