更改outerHTML后传递一个元素答案

【问题标题】：passing an element after changing outerHTML更改outerHTML后传递一个元素
【发布时间】：2018-10-21 02:13:32
【问题描述】：

我想改变一些元素的outerHTML，然后把它传递给一个函数，这样函数就可以用它做点什么：

const bars = document.getElementsByClassName('bar');

for (let i = bars.length - 1; i >= 0; i -= 1) {
  const bar = bars[i];
  bar.outerHTML = `<h1 class="bar">${bar.innerHTML}</h1>`;
  const foo = new Foo(bar);
  // ... some code
  foo.doFoo();
}

function Foo (bar) {
  this.bar = bar;
  this.doFoo = function() {
    this.bar.innerHTML = `Foo${this.bar.innerHTML}`;
    console.log('doFoo:', this.bar.innerHTML);
    // expected on page: "Dog" --> "FooDog", "Turtle" --> "FooTurtle". This doesn't happen.
  }
}

<p class="bar">Dog</p>
<p>Cat</p>
<p class="bar">Turtle</p>

然而，虽然在 outerHTML 更改后 DOM 发生了变化，但变量 bar 仍然引用元素的“旧”（未更改）版本，这当然不再存在于 DOM 中。因此无法再更改 DOM 内容。

MDN 上的这种行为的解释：

虽然元素将在文档中被替换，但其变量已设置的 outerHTML 属性仍将保留对原始内容的引用元素

如何实现 Foo-Object 仍然知道 DOM 中的正确元素，而无需再次查询 DOM？

【问题讨论】：

检查这个问题是否对您有帮助：stackoverflow.com/questions/35613977/…。我会以重复的形式关闭，但我还不想欺骗锤子。

标签： javascript html dom outerhtml

【解决方案1】：

一种选择可能是获取对您要更改其outerHTML 的每个元素的nextElementSibling 元素的引用。让我们称之为next。

然后，一旦您更新 outerHTML，您将获得对新元素的更新引用：

next.previousElementSibling

或者，实际上，如果您更新的元素已经是最后一个元素并且nextElementSibling 返回了undefined

next ? next.previousElementSibling : bar.parentElement.lastChild

const bars = document.getElementsByClassName('bar');

for (let i = bars.length - 1; i >= 0; i -= 1) {
  const bar = bars[i];
  const next = bar.nextElementSibling;
  
  bar.outerHTML = `<h1 class="bar">${bar.innerHTML}</h1>`;
  
  const foo = new Foo(next.previousElementSibling || next.parentElement.lastChild);
  
  // ...
  
  foo.doFoo();
}

function Foo (bar) {
  this.bar = bar;
  
  this.doFoo = function() {
    this.bar.innerHTML = `Foo${ this.bar.innerHTML }`;
    console.log('doFoo:', this.bar.innerHTML);
    // expected on page: "Dog" --> "FooDog", "Turtle" --> "FooTurtle". This doesn't happen.
  }
}

<p class="bar">Dog</p>
<p>Cat</p>
<p class="bar">Turtle</p>

【讨论】：