如何在没有几个内部DIV的情况下获取DIV的innerHTML？

Question

我有一些DIV，它包含带有图像，样式等的HTML，我想删除包含id ='quot'或className ='quote'的div，但是我不明白如何不仅获得每个标记的innerHTML。 例如，不包含innerHTML的<p>和</ p>也应包含在最终解析的HTML中。

var bodytext = document.getElementById("div_text");
var NewText = "";

if (bodytext.hasChildNodes){

    var children = bodytext.childNodes;        
    for (var i = 0; i < children.length; i++){
        if (children[i].id != "quot" && children[i].className != "quote" && children[i].innerText != ""){
            NewText = NewText + children[i].innerHTML;
        }            
 }

源的HTML需要解析：

<div id="div_text">
    <p>
        Some Text</p>
    <p>
        Some Text</p>
    <p>
        <img alt="" src="localhost/i/1.png" /></p>
    <div id="quot" class="quote" />
        any text <div>text of inside div</div> 
        <table><tr><td>there can be table</td></tr></table>
    </div>

    <p>
        &nbsp;</p>
</div>

所需的输出：

    <p>
        Some Text</p>
    <p>
        Some Text</p>
    <p>
        <img alt="" src="localhost/i/1.png" /></p>        
    <p>
        &nbsp;</p>

Answer 1

只需获取对目标div的引用，然后将其从各自的父级中删除即可。

也许有点像这样？

编辑：添加了代码以对克隆执行操作，而不是文档本身。 div元素没有.getElementById方法，因此我们手动搜索一个元素。

window.addEventListener('load', myInit, false);


function removeFromDocument()
{
    // 1. take car of the element with id='quot'
    var tgt = document.getElementById('quot');
    var parentNode = tgt.parentNode;
    parentNode.removeChild(tgt);

    // 2. take care of elements whose class == 'quote'
    var tgtList = document.getElementsByClassName('quote');
    var i, n = tgtList.length;
    for (i=0; i<n; i++)
    {
        // we really should be checking to ensure that there aren't nested instances of matching divs
        // The following would present a problem - <div class='quote'>outer<div class='quote'>inner</div></div>
        // since the first iteration of the loop would also remove the second element in the target list,
        parentNode = tgtList[i].parentNode;
        parentNode.removeChild(tgtList[i]);
    }

    // 3. remove the containing div
    var container = document.getElementById('div_text');
    container.outerHTML = container.innerHTML;
}

function cloneAndProcess()
{
    var clonedCopy = document.getElementById('div_text').cloneNode(true);

    var tgt;// = clonedCopy.getElementById('quot');
    var i, n = clonedCopy.childNodes.length;
    for (i=0; i<n; i++)
    {
        if (clonedCopy.childNodes[i].id == 'quot')
        {
            tgt = clonedCopy.childNodes[i];
            var parentNode = tgt.parentNode;
            parentNode.removeChild(tgt);
            break;      // done with for loop - can only have 1 element with any given id
        }
    }

    // 2. take care of elements whose class == 'quote'
    var tgtList = clonedCopy.getElementsByClassName('quote');
    var i, n = tgtList.length;
    for (i=0; i<n; i++)
    {
        // we really should be checking to ensure that there aren't nested instances of matching divs
        // The following would present a problem - <div class='quote'>outer<div class='quote'>inner</div></div>
        // since the first iteration of the loop would also remove the second element in the target list,
        parentNode = tgtList[i].parentNode;
        parentNode.removeChild(tgtList[i]);
    }

    // 3. remove the containing div
    //var container = clonedCopy;   //.getElementById('div_text');
    //container.outerHTML = container.innerHTML;
    console.log(clonedCopy.innerHTML);
}


function myInit()
{
    cloneAndProcess();
    //removeFromDocument();
}