如何在使用outerHTML更改内容后引用新的DOM对象？ [英] How to get reference to the new DOM object after changing content with outerHTML?

问题描述

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

I have a division that I need to change its outer HTML upon an event. The problem is that upon setting the outerHTML I am not able to reference the new selected DOM object unless I explicitly catch it again.

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

Is there a way to directly update the variable reference upon calling outerHTML (in my case the reference of the div variable below) ?

$("#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 会让事情变得有些奇怪，因为你完全是替换原始元素但仍然引用旧元素。

As you are seeing changing the outerHTML makes things behave a bit strangely, as you are completely replacing the original element but still referencing the old one.

最好创建一个新的 div ，添加它 之后（） 旧的那个< a href =http://api.jquery.com/remove/ =nofollow> remove（） 旧的。这会将 div 的位置保持在正确的位置。

It would be better to create a new div, add it after() the old one then remove() the old one. This maintains the position of the div in the correct place.

$("#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>

如果你确实需要使用outerHTML，你可以简单地抓住 $（this） .prev（）再次：

If you really really do need to use outerHTML, you can simply grab $(this).prev() again:

$("#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>

这篇关于如何在使用outerHTML更改内容后引用新的DOM对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！