I want to append below HTML tags which I recieved from an API call

This is what I recieved from the below API call..

<div id='rg_embed_link_437103' class='rg_embed_link' data-song-id='437103'>Read <a href='https://genius.com/Ed-sheeran-thinking-out-loud-lyrics'>“Thinking Out Loud” by Ed Sheeran</a> on Genius</div> <script crossorigin src='//genius.com/songs/437103/embed.js'></script>

The lyricsContainer does exists in the DOM , but when I append the lyrics from the API call it only appends the "Read “Thinking Out Loud” by Ed Sheeran on Genius" part.I want to append the whole lyrics part.

async function fetchLyrics(songId) {
    let response = await fetch("https://api.genius.com/songs/" + songId + "?text_format=plain&access_token=xxx")
    let jsonData = response.json();
    let lyricData = await jsonData;
    console.log(lyricData.response.song.embed_content);
    $(".lyricsContainer").append(lyricData.response.song.embed_content);


}

I tried appending the <div id='rg_embed_link_437103' class='rg_embed_link' data-song-id='437103'>Read <a href='https://genius.com/Ed-sheeran-thinking-out-loud-lyrics'>“Thinking Out Loud” by Ed Sheeran</a> on Genius</div> <script crossorigin src='//genius.com/songs/437103/embed.js'></script> on a blank HTML page and it did showed the entire lyrics section.The problem is when I tried to append the same using JavaScript.

Genius uses document.write in their embed.js so we need to do the same or replace the write function

Do be aware that these scripts will allow any code from the API to run in the scope of your site.

iframe document.write

NOTE: The first example does not work at SO due to iframe restrictions but it works in a jsfiddle and on your site

https://jsfiddle.net/mplungjan/unp2x8v0/

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const result = `<div id='rg_embed_link_437103' class='rg_embed_link' data-song-id='437103'>Read <a href='https://genius.com/Ed-sheeran-thinking-out-loud-lyrics'>“Thinking Out Loud” by Ed Sheeran</a> on Genius</div> <script crossorigin src='//genius.com/songs/437103/embed.js'><\/script>`

let ifrm = document.getElementById('song');
try {
  let ifrWin = ifrm.contentWindow || ifrm.contentDocument.defaultView
  ifrWin.document.write(result);
  ifrWin.document.close();

} catch (e) {
  console.log(e.message)
}

/* does not work
const [html,scriptStr] = result.split('<script');
console.log(html)
const div = document.getElementById('mySong')
div.innerHTML = html;
const scriptSrc = scriptStr.match(/src='(.*?)'/)[1]
console.log(scriptSrc);
const script = document.createElement('script');
script.setAttribute('crossorigin',true)
script.src=`https:${scriptSrc}`;
document.querySelector('head').appendChild(script);
// div.appendChild(script); // does also not work
*/

<!-- language: lang-html -->

<iframe id="song"></iframe>

<!-- end snippet -->

Replace document.write

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const result = `<div id='rg_embed_link_437103' class='rg_embed_link' data-song-id='437103'>Read <a href='https://genius.com/Ed-sheeran-thinking-out-loud-lyrics'>“Thinking Out Loud” by Ed Sheeran</a> on Genius</div> <script crossorigin src='//genius.com/songs/437103/embed.js'><\/script>`

   
const [html,scriptStr] = result.split('<script');
console.log(html)
const div = document.getElementById('song')
div.innerHTML = html;
const scriptSrc = scriptStr.match(/src='(.*?)'/)[1]
console.log(scriptSrc);
const script = document.createElement('script');
script.setAttribute('crossorigin',true)
script.src=`https:${scriptSrc}`;

const saveWrite = document.write;
document.write = str => div.innerHTML += str;

document.querySelector('head').appendChild(script);

<!-- language: lang-html -->

<div id="song"></div>

<!-- end snippet -->