How to get all a tag innerHTML in a span class-CodePudding

<span >
<a rel="tag">Action</a> 
<a rel="tag">Adventure</a> 
<a rel="tag">Apocalypse</a> 
<a rel="tag">Fantasy</a> 
<a rel="tag">Magic</a> 
</span>

How do I get all the a tag inner html like

Action Adventure Apocalypse Fantsay Magic

I tried using document.querySelector(".mgen a").innerHTML But I am only getting first a tag innerHTML and I also don't want to use loop to get all innerHTML as it would be lengthy any way anyone can suggest me?

CodePudding user response：

We can try getting the textContent of the .mgen element. This would return only the text content of the inner elements.

console.log(document.querySelector(".mgen").textContent)

<span >
<a rel="tag">Action</a> 
<a rel="tag">Adventure</a> 
<a rel="tag">Apocalypse</a> 
<a rel="tag">Fantasy</a> 
<a rel="tag">Magic</a> 
</span>

If you want it in the same line with only one space between the words, we can remove the newline and other spacing using regex and replace them with space

console.log(document.querySelector(".mgen").textContent.replace(/\s/g, ' '))

CodePudding user response：

Use the .innerText property on the targeted element. .innerText() represents the rendered text content of a node and its descendants.

Try this:

<body>
    <span >
        <a rel="tag">Action</a>
        <a rel="tag">Adventure</a>
        <a rel="tag">Apocalypse</a>
        <a rel="tag">Fantasy</a>
        <a rel="tag">Magic</a>
    </span>
    <script>
        let element = document.querySelector(".mgen")
        console.log(element.innerText)
    </script>
</body>

You can also use textContent property. They work similar with few differences.