Question

我有一些DIV，包含HTML的图像，样式e.t.c.我想删除包含id =＆＃39; quot＆＃39;的确切div。或className =＆＃39;引用＆＃39;，但我不明白我不仅可以获得每个标签的innerHTML。例如，＆lt; p>和＆lt; / p＆gt;没有innerHTML的内容也应包含在最终解析的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();
}

如何在DIV内部获得DIV的innerHTML？

1 个答案: