如何将该段jQuery代码正确改写为原生JavaScript代码？

云原生阿岚

2026-9-1

错误原因

核心错误：原生DOM的innerHTML是可读写属性，不是方法，你用innerHTML(xxx)的形式调用，相当于尝试把属性值当函数执行，会抛出is not a function的类型错误，代码自然无法运行。
差异提醒：jQuery选择器$(".slide-captions")默认会匹配页面上所有符合规则的元素批量操作，而document.querySelector(".slide-captions")只会返回匹配到的第一个元素，如果页面存在多个.slide-captions节点，直接用querySelector会遗漏其他元素。

正确写法

单元素场景

如果页面只有一个class为slide-captions的元素，直接给innerHTML属性赋值即可，和原jQuery代码效果完全一致：

document.querySelector(".slide-captions").innerHTML = 
  "<h2 class='current-title'>" + currentTitle + "</h2>" +
  "<h3 class='current-subtitle'>" + currentSubtitle + "</h3>";

你也可以用模板字符串简化拼接写法：

document.querySelector(".slide-captions").innerHTML = `
  <h2 class='current-title'>${currentTitle}</h2>
  <h3 class='current-subtitle'>${currentSubtitle}</h3>
`;

多元素场景

如果页面有多个.slide-captions元素，需要用querySelectorAll选中所有节点后遍历赋值：

const captionNodes = document.querySelectorAll(".slide-captions");
const captionHtml = `
  <h2 class='current-title'>${currentTitle}</h2>
  <h3 class='current-subtitle'>${currentSubtitle}</h3>
`;
captionNodes.forEach(node => {
  node.innerHTML = captionHtml;
});