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

【问题标题】：How to get reference to the new DOM object after changing content with outerHTML?使用 outerHTML 更改内容后如何获取对新 DOM 对象的引用？
【发布时间】：2016-02-24 21:55:44
【问题描述】：

我有一个部门，我需要在发生事件时更改其外部 HTML。问题是，在设置 outerHTML 时，我无法引用新选择的 DOM 对象，除非我再次明确捕获它。

有没有办法在调用outerHTML 时直接更新变量引用（在我的例子中是下面div 变量的引用）？

$("#changeDiv").click(function(){

  var div = $(this).prev();
  div[0].outerHTML = `<div id="imSecondtDiv"> <p> World </p> </div>`;
  console.log(div); // logs [div#imFirstDiv, prevObject: n.fn.init[1], context: button#changeDiv]
  
  // the following line does not affect the newly added division 
  // since the var `div` references the old DOM object
  // unless I add div = $(this).prev(); before setting the html of 
  // the paragraph it will not set it
  div.find('p').html('Override'); 

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imFirstDiv"> <p> Hello </p> </div>
<button id="changeDiv" >Change Div 1</button>

【问题讨论】：

您是否特别需要更改outerHTML（这并不是真正的标准）？您通常不会将其与 jQuery 一起使用。相反，您可以删除第一个 div 并添加第二个吗？
将 id 设置为 p 标签然后添加这个 $("#p_id").text("override");而不是 div.find('p').html('Override');
好吧，我的真实案例比示例复杂得多，我有一个项目列表，这些项目相对于列表中出现的每个项目进行索引，删除项目列表后，我会更新所有以前的项目以保持正确的索引，因此我将当前项目的所有 HTML 元素名称和 id 更新为新的，并用 outerHTML 替换循环中的分区

标签： javascript jquery html

【解决方案1】：

正如您所见，更改 outerHTML 会使事情的行为有点奇怪，因为您完全替换了原始元素但仍然引用旧元素。

最好创建一个新的div，添加它after()旧的然后remove()旧的。这样可以将div 的位置保持在正确的位置。

$("#changeDiv").click(function(){

  // get the oldDiv
  var oldDiv = $(this).prev();

  // Create a newDiv
  var newDiv = $('<div id="imSecondtDiv"> <p> World </p> </div>');

  // add newDiv after oldDiv one, then remove oldDiv from the DOM.
  oldDiv.after(newDiv).remove();
  
  // now you still have the reference to newDiv, so do what you want with it
  newDiv.find('p').html('Override'); 

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imFirstDiv"> <p> Hello </p> </div>
<button id="changeDiv" >Change Div 1</button>

使用外层HTML

如果你真的需要使用outerHTML，你可以再次获取$(this).prev()：

$("#changeDiv").click(function(){

  var div = $(this).prev();
  div[0].outerHTML = `<div id="imSecondtDiv"> <p> World </p> </div>`;

  // the "new" div is now before the button, so grab the reference of THAt one
  div = $(this).prev();

  // the following line does not affect the newly added division 
  // since the var `div` references the old DOM object
  // unless I add div = $(this).prev(); before setting the html of 
  // the paragraph it will not set it
  div.find('p').html('Override'); 

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imFirstDiv"> <p> Hello </p> </div>
<button id="changeDiv" >Change Div 1</button>

【讨论】：

这听起来很合理。你认为直接取回新的参考是不可能的吗？
已经更新了解决这个问题的答案，尽管如果可能的话我更喜欢选项 1
这是我最初的解决方案，当我发布问题以按照我们最初得到它的方式设置新参考时（检查我的 sn-p 中的评论）......但我想我会去jquery after - remove 方法毕竟要好得多，谢谢..

【解决方案2】：

我已经通过获取将要被替换的标签的引用元素（兄弟或父元素）来解决这个问题。

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

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>');

我希望它也可以与 jQuery 一起使用，因为我只用原生 javascript 编写所有脚本。

【讨论】：