如何使用JavaScript或jQuery替换指定容器的二级子元素节点

没问题，我来帮你搞定这个DOM替换的需求～不管用原生JavaScript还是jQuery都有很直接的实现方式，下面分别给你拆解步骤，连小细节都给你理清楚：

首先先纠正你代码里的一个小失误：原生JS的document.getElementById()方法不需要带#前缀，正确获取容器的方式是document.getElementById('container')。接下来按步骤实现替换：

1. 获取目标容器

const container = document.getElementById('container');

2. 精准定位到要替换的<p>3</p>元素
   这里可以用querySelector结合CSS选择器直接锁定目标，选择器div > p:nth-child(2)表示“容器下的直接div子元素里的第二个p标签”，非常精准：

const targetParagraph = container.querySelector('div > p:nth-child(2)');

3. 创建新的<h6>2</h6>元素并设置内容

const newHeading = document.createElement('h6');
newHeading.textContent = '2';

4. 执行替换操作
   用replaceWith()方法直接把旧元素换成新元素：

targetParagraph.replaceWith(newHeading);

如果担心目标元素的位置可能变化，也可以通过内容来定位，把第二步的选择器改成div > p:contains("3")，这样不管它在第几个位置，只要内容是3就会被选中替换。

jQuery的写法会更简洁，而且你原来的容器获取代码是正确的（$('#container')需要带#）。直接一行核心代码就能搞定：

const $container = $('#container');
// 定位到容器内div下的第二个p标签（jQuery的eq索引从0开始），然后替换成<h6>2</h6>
$container.find('div > p:eq(1)').replaceWith('<h6>2</h6>');

同样，如果想通过内容定位，把选择器改成div > p:contains("3")即可，代码变成：

$container.find('div > p:contains("3")').replaceWith('<h6>2</h6>');

这样两种方式都能得到你想要的最终HTML结构啦～

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