Question

How can you change this

<div id='myDiv'><p>This div has <span>other elements</span> in it.</p></div>

into this

<div id='myDiv'>This div has other elements in it.</div>

hopefully using something like this

var ele = document.getElementById('myDiv');
while(ele.firstChild) {
    replaceFunction(ele.firstChild, ele.firstChild.innerHTML);
}
function replaceFunction(element, text) {
    // CODE TO REPLACE ELEMENT WITH TEXT
}

Answer 1

You can use innerText and textContent if you want to remove all descendant nodes, but leave the text:

// Microsoft
ele.innerText = ele.innerText;
// Others
ele.textContent = ele.textContent;

If you only want to flatten certain ones, you can define:

function foldIntoParent(element) {
  while(ele.firstChild) {
    ele.parentNode.insertBefore(ele.firstChild, ele);
  }
  ele.parentNode.removeChild(ele);
}

should pull all the children out of ele into its parent, and remove ele.

So if ele is the span above, it will do what you want. To find and fold all the element children of #myDiv do this:

function foldAllElementChildren(ele) {
  for (var child = ele.firstChild, next; child; child = next) {
    next = child.nextSibling;
    if (child.nodeType === 1 /* ELEMENT */) {
      foldIntoParent(child);
    }
  }
}

foldAllElementChildren(document.getElementById('myDiv'));