将jQuery的.last()转换为原生JavaScript的方法及代码问题

首先，你的转换代码里存在几个关键错误（比如元素删除逻辑、创建元素的语法、append的顺序、innerHTML的用法），同时last()的替代方式也需要调整。我先给出完整的正确转换代码，再逐个解释细节：

完整的原生JavaScript转换代码 #

// 1. 删除所有class为footNote的div元素
const footNotes = frame.contentDocument.querySelectorAll("div.footNote");
footNotes.forEach(note => note.remove());

// 2. 获取所有div中的最后一个（对应jQuery的.find("div").last()）
const divs = frame.contentDocument.querySelectorAll("div");
const last = divs.length > 0 ? divs[divs.length - 1] : null;

// 3. 遍历currencyNotes创建并添加脚注
if (last) { // 确保找到最后一个div才执行后续操作
  Array.from(this.currencyNotes).forEach((item) => {
    // 创建footNote元素
    const footNote = document.createElement("div");
    footNote.classList.add("footNote");
    footNote.style.fontSize = "13px";

    // 将footNote添加到last元素中（对应jQuery的appendTo）
    last.appendChild(footNote);

    // 设置HTML内容（注意innerHTML是属性，不是方法）
    footNote.innerHTML = `<div style='float:left;width:25px'>${item.Id}</div> <div style='float:left;width:80%'>${item.Text}</div>`;
  });
}

关键问题解析 #

1. 替代jQuery的.last()方法 #

你遇到的类型错误，核心是原生方法的返回值和jQuery不同：

• jQuery的find("div").last()会返回一个jQuery对象，包含最后一个div元素；
• 原生中如果用querySelectorAll("div")会返回一个NodeList（类数组对象），你可以通过divs[divs.length - 1]直接取最后一项；
• 如果你想更简洁，也可以用CSS伪类直接查询最后一个div：

  const last = frame.contentDocument.querySelector("div:last-of-type");
  

  注意：:last-of-type是取父元素下的最后一个div子元素，和jQuery的.last()（取当前匹配集合的最后一项）行为一致，兼容性也很好。

2. 修复你转换代码中的其他错误 #

• 删除元素错误：你之前写的parentNode.removeChild(frame)是删除整个frame，正确的做法是遍历所有找到的footNote元素，直接调用原生的remove()方法删除自身；
• 创建元素错误：document.createElement只接受标签名（比如"div"），类名需要通过classList.add()添加，不能写在标签名里；
• append方向错误：jQuery的footNote.appendTo(last)是把footNote插入到last里面，原生应该用last.appendChild(footNote)，你之前写反了顺序；
• innerHTML用法错误：原生的innerHTML是属性，不是方法，需要用赋值语句（element.innerHTML = ...），而不是调用；
• 变量名拼写错误：currenyNotes应该是currencyNotes（少了一个字母r）。

3. 额外的健壮性处理 #

我在代码里加了if (last)的判断，避免当页面中没有div元素时出现报错，这是原生JS开发中需要注意的细节（jQuery会自动处理空集合的情况，不会报错）。

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