Javascript 如何在使用outerHTML更改内容后获取对新DOM对象的引用？

我有一个分区，我需要在事件发生时更改它的外部HTML。问题是，在设置

outerHTML

时，除非再次显式捕获新选定的DOM对象，否则无法引用该对象

调用

outerHTML

时是否有直接更新变量引用的方法（在我的例子中，是下面

div

变量的引用）

$（“#changeDiv”）。单击（函数（）{
var div=$（this.prev（）；
div[0]。outerHTML=`World
`；
console.log（div）；//logs[div#imFirstDiv，prevObject:n.fn.init[1]，context:button#changeDiv]
//下一行不影响新添加的分区
//因为var`div`引用了旧的DOM对象
//除非在设置的html之前添加div=$（this）.prev（）
//这段话不会定下来
div.find（'p'）.html（'Override'）；
});

你好

更改Div 1
正如您看到的那样，更改
outerHTML
会使事情表现得有点奇怪，因为您正在完全替换原始元素，但仍然引用旧元素

最好创建一个新的
div
，将其添加到旧的div中，然后再添加到旧的div中。这会将
div
的位置保持在正确的位置


$（“#changeDiv”）。单击（函数（）{
//去拿旧唱片
var oldDiv=$（this.prev（）；
//创建一个新的div
var newDiv=$（“World
”）；
//在oldDiv one之后添加newDiv，然后从DOM中删除oldDiv。
oldDiv.after（newDiv.remove（）；
//现在您仍然有对newDiv的引用，所以可以使用它做任何事情
newDiv.find（'p'）.html（'Override'）；
});

你好

Change Div 1
我通过获取要替换的标记的引用元素（同级或父级）解决了这个问题

这是一个不依赖于要更改的元素的函数：

function replaceElement(ele, outerHTML)
{
  var parent = false, refEle;
  //if element that's going to be changed has previousElementSibling, take it as reference. If not, the parentElement will be the reference.
  if (ele.previousElementSibling !== null)
    refEle = ele.previousElementSibling;
  else
  {
    refEle = ele.parentElement;
    //indicate that parentElement has been taken as reference
    parent = true;
  }
  //change the outerHTML
  ele.outerHTML = outerHTML;
  //return the correct reference
  if (parent)
    return refEle.firstElementChild;
  else return refEle.nextElementSibling;
}

因此，在您的情况下，您可以这样调用它：

div[0] = replaceElement(div[0], '<div id="imSecondtDiv"> <p> World </p> </div>');

div[0]=replaceElement（div[0]，“World
”）；

我希望它也能与jQuery一起工作，因为我只使用本机javascript编写所有脚本。
您是否特别需要更改
outerHTML
（这实际上并不标准）？通常情况下，jQuery不会使用这种方法。相反，您是否可以删除第一个div并将第二个？set id添加到p标记，然后添加此$（“#p#id”）.text（“覆盖”）；而不是div.find（'p'）.html（'Override'）；我的实际情况比这个例子要复杂得多，我有一个项目列表，这些项目相对于列表中出现的每个项目进行索引，删除项目列表中的后，我会更新所有以前项目的索引以保持正确的索引，因此我会用新项目更新当前项目的所有HTML元素名称和ID，并用outerHTMLT替换循环中的分区。这听起来很合理。。你认为直接获取新引用永远不可能吗？我已经更新了答案来处理这个问题，不过如果可能的话，我更喜欢选项1。这是我发布问题时的原始解决方案，以与最初获取新引用的方式相同的方式设置新引用（检查我代码段中的注释）。。。但我想我还是会选择jquery
after-remove
方法，毕竟这会更好，谢谢。。