如何不使用jQuery实现追加元素并获取最后一个子元素

嘿，我来帮你把这段jQuery代码转换成原生JS，确保功能完全一致！

先拆解下原jQuery代码的核心作用：

Sk.domOutput = function(html) { return jQuery('body').append(html).children().last(); };

这个函数接收一段HTML字符串，把它追加到页面的<body>标签里，然后返回刚添加的最后一个元素。

方案一：简洁版（推荐） #

用原生的insertAdjacentHTML方法直接插入HTML，然后取body的最后一个子元素，代码更简洁，和原jQuery逻辑完全对齐：

Sk.domOutput = function(html) {
  // 将HTML字符串插入到body的末尾
  document.body.insertAdjacentHTML('beforeend', html);
  // 返回body的最后一个子元素
  return document.body.lastElementChild;
};

方案二：更严谨的解析方式 #

如果需要更稳妥地处理复杂HTML结构（比如包含多个顶级元素的情况），可以先创建临时容器解析HTML，再把元素移到body里：

Sk.domOutput = function(html) {
  const tempDiv = document.createElement('div');
  // 用临时容器解析HTML字符串
  tempDiv.innerHTML = html;
  
  // 把临时容器里的所有元素逐个追加到body
  while (tempDiv.firstChild) {
    document.body.appendChild(tempDiv.firstChild);
  }
  
  // 返回body的最后一个子元素
  return document.body.lastElementChild;
};

为什么这两种方式都能替代原jQuery代码？ #

原jQuery的append(html)本质上就是把HTML字符串解析成DOM元素，再追加到目标节点；.children().last()就是取目标节点的最后一个子元素。上面的原生实现完全复刻了这个逻辑，而且不需要依赖jQuery库。

内容的提问来源于stack exchange，提问作者Julien