EXTJS：如何在父节点的两个子div之间插入新节点？

我来帮你排查下代码里的问题，你的插入逻辑没生效主要是两个细节没处理对：

1. 选择器语法错误 #

ExtJS的选择器遵循CSS选择器规则，类选择器必须以.开头。你写的Ext.select("child3")和Ext.select("parent")会被解析为标签选择器（寻找<child3>和<parent>标签），而不是类名为child3/parent的元素，自然找不到目标节点。

正确的写法应该给类名加上.前缀：

Ext.select(".child3") // 匹配class="child3"的元素
Ext.select(".parent") // 匹配class="parent"的元素

2. Ext.select返回的是元素集合，需转为单个元素 #

Ext.select()返回的是CompositeElement（元素集合对象），直接调用insertBefore方法不会对单个元素生效——你需要用first()方法取出集合中的第一个（也是你需要的那个）元素：

修正后的完整代码 #

// 创建新的span元素并添加类名
var newNode = document.createElement("span");
newNode.className = "child2";

// 获取父元素和要插入位置的目标元素（注意加.前缀，并用first()取单个元素）
var targetElement = Ext.select(".child3").first();
var parentElement = Ext.select(".parent").first();

// 执行插入操作：在parent内，把newNode插到targetElement前面
parentElement.insertBefore(newNode, targetElement);

更简洁的写法（推荐） #

如果你的.parent和.child3在页面中都是唯一的，用Ext.get()会更高效——它直接返回单个Ext.dom.Element对象，不需要再调用first()：

var newNode = document.createElement("span");
newNode.className = "child2";

var targetElement = Ext.get(".child3");
var parentElement = Ext.get(".parent");

parentElement.insertBefore(newNode, targetElement);

额外提示：用ExtJS方式创建元素 #

如果你想更贴合ExtJS的开发习惯，也可以直接用Ext创建元素，避免原生DOM操作：

var newNode = Ext.create('Ext.dom.Element', {
    tag: 'span',
    cls: 'child2' // 对应class="child2"
});

var targetElement = Ext.get(".child3");
var parentElement = Ext.get(".parent");

parentElement.insertBefore(newNode, targetElement);

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