js 实现jquery append

使用原生 JavaScript 实现类似 jQuery 的 append 功能

在原生 JavaScript 中，可以通过 appendChild 或 insertAdjacentHTML 方法实现类似 jQuery 的 append 功能。以下是几种实现方式：

使用 appendChild 方法

appendChild 方法将节点添加到指定父节点的子节点列表末尾。

// 获取父元素
const parentElement = document.getElementById('parent');

// 创建要添加的子元素
const childElement = document.createElement('div');
childElement.textContent = '这是新添加的内容';

// 将子元素添加到父元素中
parentElement.appendChild(childElement);

使用 insertAdjacentHTML 方法

insertAdjacentHTML 方法可以更灵活地插入 HTML 字符串。

// 获取父元素
const parentElement = document.getElementById('parent');

// 插入 HTML 字符串到父元素内部末尾
parentElement.insertAdjacentHTML('beforeend', '<div>这是新添加的内容</div>');

实现类似 jQuery 的链式调用

如果需要链式调用，可以封装一个简单的函数：

function $(selector) {
  const element = document.querySelector(selector);
  return {
    append: function(html) {
      element.insertAdjacentHTML('beforeend', html);
      return this; // 返回对象本身以实现链式调用
    }
  };
}

// 使用示例
$('#parent').append('<div>内容1</div>').append('<div>内容2</div>');

动态添加多个元素

如果需要添加多个元素，可以遍历数组并依次添加：

const items = ['Item 1', 'Item 2', 'Item 3'];
const parentElement = document.getElementById('parent');

items.forEach(item => {
  const div = document.createElement('div');
  div.textContent = item;
  parentElement.appendChild(div);
});

注意事项

• appendChild 只能添加 DOM 节点，不能直接添加 HTML 字符串。
• insertAdjacentHTML 可以直接插入 HTML 字符串，但需要注意避免 XSS 攻击。
• 原生方法没有 jQuery 的错误处理机制，需确保父元素存在。

以上方法可以根据需求选择使用，实现类似 jQuery append 的功能。