Javascript 用字符串替换元素

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