JS追加Genius API返回的歌词嵌入内容仅显示部分内容的问题

问题原因 #

当你通过jQuery的.append()方法动态插入包含<script>标签的Genius嵌入内容时，jQuery不会自动执行这段脚本。而直接将嵌入内容写在静态HTML页面中时，浏览器在加载页面过程中会自动解析并执行脚本，因此能正常渲染完整的歌词区域。

解决方案 #

需要手动分离嵌入内容中的DOM元素和脚本，先插入DOM部分，再单独创建并添加脚本元素，触发浏览器加载执行：

async function fetchLyrics(songId) {
    let response = await fetch(`https://api.genius.com/songs/${songId}?text_format=plain&access_token=xxx`);
    let lyricData = await response.json();
    const embedContent = lyricData.response.song.embed_content;
    
    // 创建临时容器解析嵌入内容
    const tempContainer = document.createElement('div');
    tempContainer.innerHTML = embedContent;
    
    // 提取嵌入用的div和script标签
    const embedDiv = tempContainer.querySelector('.rg_embed_link');
    const embedScript = tempContainer.querySelector('script');
    
    // 将div插入目标容器
    $('.lyricsContainer').append(embedDiv);
    
    // 手动创建并添加脚本，触发执行
    if (embedScript) {
        const newScript = document.createElement('script');
        newScript.crossOrigin = embedScript.crossOrigin;
        newScript.src = embedScript.src;
        document.body.appendChild(newScript);
    }
}

原理说明 #

动态创建的<script>元素被添加到DOM后，浏览器会自动发起请求加载脚本并执行，这会触发Genius的嵌入逻辑，将简单的链接替换为完整的歌词区域。而直接用jQuery追加带script的HTML时，jQuery内部会对脚本做特殊处理（不会自动执行），因此无法触发嵌入渲染。

内容的提问来源于stack exchange，提问作者Damian Peiris.