Question

如何更改此

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

进入这个

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

希望使用类似的东西

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

如果要删除所有后代节点，可以使用innerText和textContent，但保留文字：

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

如果你只想展平某些，你可以定义：

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

应将ele中的所有儿童拉入其父级，然后移除ele。

因此，如果ele是上面的span，它会做你想要的。要查找并折叠#myDiv的所有子元素，请执行以下操作：

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'));

Answer 2

如果你不反对使用jQuery，从元素中剥离HTML并只留下文本就像这样简单：

$(element).html($(element).text());

Answer 3

您可以选择 innerText

console.log(ele.innerText)

Javascript用字符串替换元素

3 个答案: