使用jQuery append插入img正常但追加<picture>标签失效是什么原因

首先明确结论：jQuery本身完全支持追加<picture>标签，你给出的示例代码本身可以正常运行，不存在原生不支持的情况。你遇到的插入失效问题，通常是以下几种场景导致的：

• jQuery版本过低
  <picture>是HTML5新增的语义化标签，低于1.12.x/2.2.x版本的jQuery在解析HTML5新标签的字符串时会出现解析异常，导致节点插入失败。你示例中使用的jQuery 3.3.1属于稳定支持的版本，如果你实际项目用的版本更低，升级到3.x稳定版即可解决。
• 动态拼接字符串存在语法错误
  如果实际开发中你的media、srcset属性是动态拼接生成的，很容易出现引号未正确闭合、特殊字符未转义的问题，会导致整个HTML字符串结构断裂，jQuery解析后生成的就是无效的DOM节点。你可以先打印拼接完成的txt字符串，检查结构是否符合预期。
• 目标元素不存在或未加载完成
  如果执行append操作时，#my_div还没有被渲染到DOM树中（比如脚本放在<head>里且没有加DOMReady监听），选择器无法命中目标元素，自然无法插入内容。你可以通过console.log($('#my_div').length)判断是否能正常选中目标元素。
• 第三方脚本拦截过滤
  如果项目中配置了XSS过滤脚本、自定义DOM操作钩子，或者有其他全局脚本对插入的内容做标签白名单校验，<picture>和<source>标签可能会被当作非法标签过滤移除，导致插入后看不到对应节点。

内容的提问来源于stack exchange，提问作者Alvaro Urbano Lima