如何动态选择jQuery的append()与prepend()方法？

嘿，你想要的这种直接动态选择调用append/prepend方法的方式完全可行！而且写法非常简洁，不用额外封装函数或者重复写条件判断。

核心思路 #

在jQuery里，append和prepend本质都是jQuery对象上的函数引用，所以你可以直接把方法本身赋值给变量（注意不要加括号，加括号就变成执行方法了），之后通过变量直接调用即可。

具体实现代码 #

对应你的场景，写法可以是这样：

// 根据切换条件，直接选择对应的方法（不要加括号！）
const insertMethod = condition ? parentElement.append : parentElement.prepend;

// 遍历数据，统一调用选中的方法
datas.forEach(element => {
  insertMethod(element);
});

如果你的datas是DOM元素集合或者jQuery对象，甚至可以不用循环，直接批量传入：

const insertMethod = condition ? parentElement.append : parentElement.prepend;
insertMethod(datas); // 一次性插入所有元素

为什么这能生效？ #

• 当你写parentElement.append时，拿到的是这个方法的函数本身，而不是执行方法后的结果。把它赋值给变量insertMethod后，变量就相当于指向了append或prepend方法。
• 调用insertMethod(element)时，函数的上下文（this）会自动绑定到parentElement，效果和直接写parentElement.append(element)完全一致。

这种写法既保持了代码的简洁性，又完美统一了四种切换场景的DOM操作逻辑，完全符合你的需求～

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