如何在jQuery中替代document.createElement与.createDocument()方法？

一、替代 document.createElement #

嘿，其实jQuery本身就提供了超简洁的元素创建方式，完全能替代原生的document.createElement！你只需要用$('<标签名>')的语法就能直接创建对应DOM元素，还能直接链式调用jQuery的各种方法，比原生写法清爽太多了。

比如你的原代码，我们可以改成这样：

for (let word in myDictionary) { 
  // 直接用jQuery创建button，同时设置内容和点击事件
  const $button = $('<button>').html(word).on("click", createOnClickListener(myDictionary[word]));
  // 创建li元素并嵌套button，再追加到目标列表
  const $li = $('<li>').append($button);
  $(buttonListElement).append($li);
}

是不是简洁很多？而且你还能在创建元素时直接设置属性，比如：

// 直接创建带class和id的button
const $btn = $('<button class="custom-btn" id="btn-01">').text('点我试试');

如果想进一步优化性能（减少页面重排），可以先把所有元素放到临时容器里，最后一次性追加到DOM：

const $tempContainer = $('<div>');
for (let word in myDictionary) { 
  const $button = $('<button>').html(word).on("click", createOnClickListener(myDictionary[word]));
  $tempContainer.append($('<li>').append($button));
}
// 把临时容器的子元素一次性追加到目标列表
$(buttonListElement).append($tempContainer.children());

二、替代 document.createDocumentFragment（你大概率是指这个？） #

你提到的.createDocument()应该是笔误啦，原生JS里常用的是document.createDocumentFragment()——用来创建文档片段，批量添加元素时优化性能。

在jQuery里，有两种方式替代它：

1. 直接用原生片段+jQuery包装：

const fragment = document.createDocumentFragment();
// 往片段里添加元素
$(fragment).append($('<li>').text('测试项'));
// 一次性把片段追加到DOM
$(buttonListElement).append(fragment);

2. 更简单的临时容器法：用jQuery创建一个空<div>当临时容器，把所有元素先塞进去，最后把容器的子元素一次性移到目标节点——jQuery内部会自动做类似文档片段的优化，减少DOM操作次数：

const $temp = $('<div>');
// 批量构建元素
for (let word in myDictionary) {
  $temp.append($('<li>').append($('<button>').html(word).on("click", createOnClickListener(myDictionary[word]))));
}
// 一次性追加到目标列表
$(buttonListElement).append($temp.children());

这样不管是单个元素创建还是批量处理，都能完美替代原生方法啦！

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