使用flatpickr时如何正确追加HTML元素？

嘿，我一眼就看出问题出在哪了——你在append()里用了HTML转义实体<和>，这就导致jQuery把整个字符串当成纯文本渲染，而不是解析成HTML标签啦！

问题根源 #

你写的代码里是：

instance.prevMonthNav.append("<img src='/ui/images/icons/arrow-left.svg'>");

这里的<其实是<的HTML转义写法，在JavaScript字符串里，它就是普通的文本内容，jQuery不会把它解析成HTML标签，自然就会原样显示出来。

修正方案 #

直接把转义实体换成原始的HTML标签符号就行，比如：

$dateRangeInputs.flatpickr({
  altInput: true,
  mode: 'range',
  onOpen: function(selectedDates, dateStr, instance) {
    instance.prevMonthNav.append("<img src='/ui/images/icons/arrow-left.svg' alt='Previous month'>");
  }
});

如果还是有问题，推荐用jQuery创建DOM元素的方式，这种方法更可靠，还能顺便添加属性提升可访问性：

$dateRangeInputs.flatpickr({
  altInput: true,
  mode: 'range',
  onOpen: function(selectedDates, dateStr, instance) {
    const $prevArrow = $('<img>', {
      src: '/ui/images/icons/arrow-left.svg',
      alt: '切换到上月' // 可以根据你的需求写合适的alt文本
    });
    $prevArrow.appendTo(instance.prevMonthNav);
  }
});

另外，用原生JS的innerHTML直接插入也是个不错的选择，有时候会更直接：

$dateRangeInputs.flatpickr({
  altInput: true,
  mode: 'range',
  onOpen: function(selectedDates, dateStr, instance) {
    instance.prevMonthNav.innerHTML += "<img src='/ui/images/icons/arrow-left.svg' alt='切换到上月'>";
  }
});

最后别忘了检查一下图片的路径是否正确，避免出现404的情况哦！

内容的提问来源于stack exchange，提问作者muz the axe