用outerHTML替换元素并立即访问新创建的元素 [英] Replace element with outerHTML and immediately access the newly created element

问题描述

我正在用 outerHTML 替换它的内容来取代DOM元素。这个技巧很有效，但我需要立即访问新创建的DOM元素。

不幸的是，创建元素< x> 并生成 var code 的内容不受我控制。

  var code，e;（function（）{/ ** *在这个IIFE内完成的事情不受我控制* / code ='< div style =border：1px solid black;>'+' < span> I< span>想< span>'+'< span>到< / span>'+'< span>访问< / span>' +'< span>全部< / span>'+'< span>这些< / div>'+'< span>跨度< / div>' = document.getElementById（'replace_this'）;}（））; e.outerHTML = code; //此时，元素e被新添加的HTML替换。让我们来做一个alertale（'检查文档，新的HTML被渲染'）; var spans = e.getElementsByTagName（'span'）; //哎呀！空的collectionalert（spans.length）; // alerts 0alert（e.outerHTML）; // alert'< x>< / x>' 

< div id =containerstyle =padding：20px; border：1px dashed grey;> < div>请勿替换此项。< / div> < x id =replace_this>< / x> < div>不要替换这个< / div>< / div>

这个行为在 MDN关于 outerHTML 的说明：

另外，虽然元素会在文档中被替换，其设置了outerHTML属性的变量仍然会保存对原始元素的引用。所以我的问题是， PS：我已经准备好放弃 outerHTML c>如果还有另一种方法可以替换元素，然后访问新创建的元素。

解决方案

最后，我解决了用于在之前插入新元素，使用 insertAdjacentHTML ，通过调用 previousSibling ，然后使用 parentElement 。 removeChild



  var code，e;（function（）{/ ** *在这个IIFE内完成的事情不受我控制* / code ='< div style =border：1px solid black;>'+'< span> I< / span>'+'< span>想要< / span&g t;'+'< span>到< / span>'+'< span>存取< / span>'+'< span>所有< / span>'+'< span>这些< ; / span>'+'< span>跨度。< / span>'+'< / div>'; e = document.getElementById（'replace_this'）;}（））; //在< x> e.insertAdjacentHTML（'beforeBegin'，code）之前插入新元素; //现在< x>的previousSibling应该是新添加的元素var new_elem = e.previousSibling; //删除< x> e.parentElement.removeChild（e）; //到此为止，元素e会被新添加的HTML替换。让我们来做一个alertale（'检查文档，新的HTML被渲染'）; var spans = new_elem.getElementsByTagName（'span'）;警报（spans.length）; // alert 7alert（new_elem.outerHTML）; //警告新元素的内容 

 < div id = containerstyle =padding：20px; border：1px dashed grey;> < div>请勿替换此项。< / div> < x id =replace_this>< / x> < div>不要替换这个< / div>< / div>  

b

I am replacing a DOM element by replacing its content with outerHTML. The trick works, but I need to immediately access the DOM element that was newly created.

Unfortunately the creation of element <x> and generation of the contents of var code is not under my control.

var code, e;

(function () {
  /**
   * Things done inside this IIFE is not under my control
   */
  code =
    '<div style="border: 1px solid black;">' +
    '  <span>I </span>' +
    '  <span>want </span>' +
    '  <span>to </span>' +
    '  <span>access </span>' +
    '  <span>all </span>' +
    '  <span>these </span>' +
    '  <span>spans.</span>' +
    '</div>';
  e = document.getElementById('replace_this');
}());

e.outerHTML = code;

// by this point, element e is replaced with newly added HTML. Let's do
// an alert to make sure
alert('Check the document. New HTML is rendered.');

var spans = e.getElementsByTagName('span'); // oops! empty collection
alert(spans.length); // alerts 0
alert(e.outerHTML); // alerts '<x></x>'

<div id="container" style="padding: 20px; border: 1px dashed grey;">
  <div>Don't replace this.</div>
  <x id="replace_this"></x>
  <div>Don't replace this either.</div>
</div>

The behavior is explained in MDN's notes on outerHTML:

Also, 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

So my question is, how can I access the newly added elements immediately after I replaced the old element?

PS: I am ready to abandon outerHTML if there's another way that I can use to replace an element and then access the newly created element.

解决方案

Finally I settled for inserting the new element before, using insertAdjacentHTML, getting the new element by calling previousSibling, and then removing the unnecessary element with parentElement.removeChild

var code, e;

(function () {
  /**
   * Things done inside this IIFE is not under my control
   */
  code =
    '<div style="border: 1px solid black;">' +
    '  <span>I </span>' +
    '  <span>want </span>' +
    '  <span>to </span>' +
    '  <span>access </span>' +
    '  <span>all </span>' +
    '  <span>these </span>' +
    '  <span>spans.</span>' +
    '</div>';
  e = document.getElementById('replace_this');
}());

// insert the new element just before <x>
e.insertAdjacentHTML('beforeBegin', code);
// now <x>'s previousSibling should be the newly added element
var new_elem = e.previousSibling;
// get rid of <x>
e.parentElement.removeChild(e);

// by this point, element e is replaced with newly added HTML. Let's do
// an alert to make sure
alert('Check the document. New HTML is rendered.');

var spans = new_elem.getElementsByTagName('span'); 
alert(spans.length); // alerts 7
alert(new_elem.outerHTML); // alerts contents of new element

<div id="container" style="padding: 20px; border: 1px dashed grey;">
  <div>Don't replace this.</div>
  <x id="replace_this"></x>
  <div>Don't replace this either.</div>
</div>

这篇关于用outerHTML替换元素并立即访问新创建的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！