10

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.

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>

3
  • Do you specifically need to change outerHTML (which isn't really standard anyway)? You wouldn't generally use this with jQuery. Instead, could you remove the first div and add the second?
    – Rhumborl
    Feb 24, 2016 at 22:00
  • set id to p tag then add this $("#p_id").text("override"); instead of div.find('p').html('Override'); Feb 24, 2016 at 22:01
  • Well my real case is much more complex than the example, I have a list of items that are indexed relative to each items occurrence in the list, upon deleting on of the items list am updating the index of all the previous items to keep proper indexing so I am updating all the HTML elements names and ids of the current item with the new ones and replacing the divisions in a loop with outerHTML
    – KAD
    Feb 24, 2016 at 22:03

3 Answers 3

4

I have solved this by getting a reference element (sibling or parent) of tag that's going to be replaced.

Here is a function which is not dependent on which element are you going to change:

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;
}

So in your case, you would invoke it this way:

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

I hope it will work with jQuery as well, as I am writing all my scripts only in native javascript.

2

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.

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>

Using outerHTML

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>

3
  • This sounds reasonable.. Do you think getting the new reference back directly is never possible?
    – KAD
    Feb 24, 2016 at 22:08
  • Have updated the answer to handle that, although I would prefer option 1 if possible
    – Rhumborl
    Feb 24, 2016 at 22:11
  • That was my original solution when I posted the question to set the new reference the same way we got it initially (check the comment in my snippet) ... But I think I would go with the jquery after - remove approach after all which is much better thanks..
    – KAD
    Feb 24, 2016 at 22:14
0

Is there a way to directly update the variable reference upon calling outerHTML?

No. According to MDN Web Docs:

While the element will be replaced in the document, the variable whose outerHTML property was set will still hold a reference to the original element.

const p = document.querySelector('p');
p.outerHTML = '<p>Goodbye, world!</p>';
console.log(p.textContent);
<p>Hello, world!</p>

As a workaround, however, you can create a live HTMLCollection from which to get the element both before and after the update:

const Ps = document.getElementsByTagName('p');
Ps[0].outerHTML = '<p>Goodbye, world!</p>';
console.log(Ps[0].textContent);
<p>Hello, world!</p>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.