如何在克隆的.parent div的.child子div中插入元素并正确追加？

嗨，我来帮你搞定这个问题！你遇到的核心问题大概率是——克隆的时候没抓对完整的.parent容器，或者后续操作不小心把.child从克隆的父元素里单独拎出来插入了，导致最终只出现了.child而不是整个.parent。

下面分两种常用场景（jQuery 和 原生JS）给你正确的实现步骤和代码：

一、jQuery 实现方案 #

// 1. 克隆完整的.parent元素（括号里的true可选，用于克隆元素绑定的事件）
const clonedParent = $('.parent').clone(true);

// 2. 在克隆后的.parent内部，找到.child并插入新元素
clonedParent.find('.child').append('<div class="new-item">这是新插入的内容</div>');

// 3. 将整个克隆好的.parent插入到.dynamic-stuff元素的前面
$('.dynamic-stuff').before(clonedParent);

二、原生JavaScript 实现方案 #

// 1. 获取原始.parent元素，深克隆整个节点（true表示包含所有子元素和事件）
const originalParent = document.querySelector('.parent');
const clonedParent = originalParent.cloneNode(true);

// 2. 在克隆后的.parent里找到.child，创建并插入新元素
const clonedChild = clonedParent.querySelector('.child');
const newElement = document.createElement('div');
newElement.className = 'new-item';
newElement.textContent = '这是新插入的内容';
clonedChild.appendChild(newElement);

// 3. 将克隆后的.parent插入到.dynamic-stuff的前面
const dynamicStuff = document.querySelector('.dynamic-stuff');
dynamicStuff.parentNode.insertBefore(clonedParent, dynamicStuff);

为什么你的代码只插入了.child？ #

大概率是你错误地直接克隆了.parent .child，而不是整个.parent，比如类似下面的错误写法：

// ❌ 错误示例：只克隆了.child，丢失了.parent容器
const clonedChild = $('.parent .child').clone();
clonedChild.append(newElement);
$('.dynamic-stuff').before(clonedChild);

这种写法只会把单独的.child插入页面，自然看不到外层的.parent啦。

核心要点就是：始终围绕克隆后的完整.parent容器进行操作，先克隆整个父元素，再在它内部修改.child，最后把整个父元素插入目标位置。

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