Question

我通过函数收到一个元素，然后我希望通过替换父元素的innerHTML（通过替换其中的某些元素）来重新定位该元素。

这是我正在做的事的一个例子：

function update(child){
  child.parentNode.innerHTML = child.parentNode.innerHTML.replace(/Stuff/, 'Things');
  child.innerHTML = 'More stuff again.';
  console.log(child);
}

<div id='parent'>
  <div id='random things'></div>
  <br/>
  Stuff.
  <div id='child'>
    More stuff
  </div>
</div>

如您在此处看到的，孩子的innerHTML在控制台中正确更新，但在页面上未正确更新。在更新父级的innerHTML之后，如何定位正确的元素或记住该元素的先前位置？

我不知道该元素的确切位置，因此无法添加或添加该元素。

Answer 1

编辑（以反映新问题）

如果在处理id时未修改子项parent，则可以立即获取它，然后使用它来获取新的引用。

function update(child){
  var id = child.id // Get the id for later
  child.parentNode.innerHTML = child.parentNode.innerHTML.replace(/Stuff/, 'Things');
  child = document.getElementById(id) // Update child reference
  child.innerHTML = 'More stuff again.';
  console.log(child);
}

如果id被修改，则可以使用它再次获得child

旧答案

通过更改parent的内部HTML，对child元素的引用将丢失。您可以在修改parent的内部HTML之后立即对其进行更新。

var child  = document.getElementById('child'),
parent = document.getElementById('parent');

// do something with child here

parent.innerHTML = 'Parent ' + parent.innerHTML;
child = document.getElementById('child') // Get new child reference
child.innerHTML = 'More stuff again.';

console.log(child);

在更新innerHTML时记住元素位置

1 个答案: