Nested with href

Good morning,I have a problem displaying the message of a comment I get from the YouTube API when I try to nest an a inside another a. What I want to achieve is this:expected behaviour

The two cases I have are as follows:

1. The comment message is plain text: in this case I create an with the href leading to the original youtube comment, and inside the I put the text. This is no problem. For example, when text is: "Felix needs to start putting subtitles in when he speaks japanese".enter image description here

2. The message of the comment comes with html (it is usually a link that refers to an exact minute of a video). In this case, having the structure -> -> , the are separated, not kept one inside the other. That is to say, the first that I create and the that come in the message of the YouTube API are separated. What I get is that I can't have the link to the normal comment when hovering over the text. What I would like would be that I can click on any side of the message and it takes me to the original comment, and if I click exactly in the minutes of duration of the video, it takes me to that address. For example, when text is:

"Omg <a href=\"https://www.youtube.com/watch?v=7qo8dOn3p60&amp;t=430\">07:10</a> Michael and Pewds reunion😍 Crazy times but it was fun!! Hi Michael <a href=\"https://www.youtube.com/watch?v=7qo8dOn3p60&amp;t=451\">07:31</a>"

enter image description here

I have achieved this in a very messy way. First I put the first <a> as <span>, make innerHtml of the comments,then take the elements with the js selectors, and replace that with an (putting the corresponding classes and href).

There is no way, that when I am creating the html with js, I can nest the two <a> with their href?

I hope you can help me.