JavaScript在每个父div

时间：2015-12-01 10:57:26

标签： javascript html parsing dom dom-traversal

好吧，我试图通过课程fsm fwn fcg＆amp;获得href值。从下面的HTML代码中使用类clearfix _5x46在每个div之后插入该URL。

<div class="clearfix _5x46">
    <a data-hovercard="/ajax/hovercard/page.php?id=155417167835918" data-ft="{&quot;tn&quot;:&quot;\u003C&quot;}" tabindex="0" aria-hidden="true" href="https://www.facebook.com/zuck/?ref=nf" class="_5pb8 _29h _303" aria-owns="js_4u" aria-haspopup="true" aria-describedby="js_4v"
    id="js_4w">
        <div class="_38vo">
            <img alt="" src="https://scontent.fmaa1-2.fna.fbcdn.net/hprofile-xaf1/v/t1.0-1/p50x50/12122890_1080690385308587_866657847317635965_n.jpg?oh=4523c96bbb805f5f4228fc4fc2ff32b0&amp;oe=56EC4A34" class="_s0 _5xib _5sq7 _44ma _rw img">
        </div>
    </a>
    <div class="_3dp _29k">
        <div>
            <div class="_6a">
                <div style="height:40px" class="_6a _6b"></div>
                <div class="_6a _6b">
                    <h5 data-ft="{&quot;tn&quot;:&quot;C&quot;}" class="_5pbw" id="js_45"><span class="fwn fcg"><span data-ft="{&quot;tn&quot;:&quot;k&quot;}" class="fwb fcg"><a data-hovercard="/ajax/hovercard/page.php?id=155417167835918&amp;extragetparams=%7B%22fref%22%3A%22nf%22%7D" href="https://www.facebook.com/zuck/?fref=nf" aria-owns="js_57" aria-haspopup="true" aria-describedby="js_58" id="js_59">Mark Zuckerberg</a></span></span></h5>
                    <div class="_5pcp"><span><span class="fsm fwn fcg"><a target="" href="/zuck/posts/1093538600690432" class="_5pcq"><abbr class="_5ptz timestamp livetimestamp" data-shorten="1" data-utime="1448936808" title="Tuesday, December 1, 2015 at 7:56am"><span class="timestampContent" id="js_46">7 hrs</span>
                        </abbr>
                        </a>
                        </span>
                        </span><span aria-hidden="true" role="presentation"> · </span><a role="button" href="#" class="uiStreamPrivacy inlineBlock fbStreamPrivacy fbPrivacyAudienceIndicator _5pcq" aria-label="Public" data-hover="tooltip"><i class="lock img sp_uTzdBspOD9E sx_011d25"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="clearfix _5x46">
    <a data-hovercard="/ajax/hovercard/page.php?id=155417167835918" data-ft="{&quot;tn&quot;:&quot;\u003C&quot;}" tabindex="0" aria-hidden="true" href="https://www.facebook.com/elon/?ref=nf" class="_5pb8 _29h _303" aria-owns="js_4u" aria-haspopup="true" aria-describedby="js_4v"
    id="js_4w">
        <div class="_38vo">
            <img alt="" src="https://scontent.fmaa1-2.fna.fbcdn.net/hprofile-xaf1/v/t1.0-1/p50x50/12122890_1080690385308587_866657847317635965_n.jpg?oh=4523c96bbb805f5f4228fc4fc2ff32b0&amp;oe=56EC4A34" class="_s0 _5xib _5sq7 _44ma _rw img">
        </div>
    </a>
    <div class="_3dp _29k">
        <div>
            <div class="_6a">
                <div style="height:40px" class="_6a _6b"></div>
                <div class="_6a _6b">
                    <h5 data-ft="{&quot;tn&quot;:&quot;C&quot;}" class="_5pbw" id="js_45"><span class="fwn fcg"><span data-ft="{&quot;tn&quot;:&quot;k&quot;}" class="fwb fcg"><a data-hovercard="/ajax/hovercard/page.php?id=155417167835918&amp;extragetparams=%7B%22fref%22%3A%22nf%22%7D" href="https://www.facebook.com/elon/?fref=nf" aria-owns="js_57" aria-haspopup="true" aria-describedby="js_58" id="js_59">Elon Musk</a></span></span></h5>
                    <div class="_5pcp"><span><span class="fsm fwn fcg"><a target="" href="/elon/posts/11563538600690432" class="_5pcq"><abbr class="_5ptz timestamp livetimestamp" data-shorten="1" data-utime="1448936808" title="Tuesday, December 1, 2015 at 7:56am"><span class="timestampContent" id="js_46">7 hrs</span>
                        </abbr>
                        </a>
                        </span>
                        </span><span aria-hidden="true" role="presentation"> · </span><a role="button" href="#" class="uiStreamPrivacy inlineBlock fbStreamPrivacy fbPrivacyAudienceIndicator _5pcq" aria-label="Public" data-hover="tooltip"><i class="lock img sp_uTzdBspOD9E sx_011d25"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

DOM结构来自facebook.com网络版。将重复每个具有班级clearfix _5x46的div。我能够从下面的代码中找到href值，但不知道如何在本地JavaScript中使用类clearfix _5x46在每个div之后插入值。 

var dl = document.querySelectorAll("span.fsm.fwn.fcg a");

        for(i=0; i<dl.length; i++)
         {
            console.log(dl[i].href);
        }

请提供如何在每个div href之后插入clearfix _5x46。在此先感谢。

1 个答案:

答案 0 :(得分：0)

＆＃13;
＆＃13; 
NodeList.prototype.forEach = Array.prototype.forEach;

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

document.querySelectorAll('._5x46').forEach(function(el) {
  var a = el.querySelector('span.fsm.fwn.fcg a');
  
  var node = document.createElement('div');
  node.innerHTML = a.getAttribute('href');
  node.classList.add('href');
  insertAfter(node, el);
});
＆＃13; 
.href {
  background:silver;
  padding:10px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clearfix _5x46">
    <a data-hovercard="/ajax/hovercard/page.php?id=155417167835918" data-ft="{&quot;tn&quot;:&quot;\u003C&quot;}" tabindex="0" aria-hidden="true" href="https://www.facebook.com/zuck/?ref=nf" class="_5pb8 _29h _303" aria-owns="js_4u" aria-haspopup="true" aria-describedby="js_4v"
        id="js_4w">
        <div class="_38vo">
            <img alt="" src="https://scontent.fmaa1-2.fna.fbcdn.net/hprofile-xaf1/v/t1.0-1/p50x50/12122890_1080690385308587_866657847317635965_n.jpg?oh=4523c96bbb805f5f4228fc4fc2ff32b0&amp;oe=56EC4A34" class="_s0 _5xib _5sq7 _44ma _rw img">
        </div>
    </a>
    <div class="_3dp _29k">
        <div>
            <div class="_6a">
                <div style="height: 40px" class="_6a _6b"></div>
                <div class="_6a _6b">
                    <h5 data-ft="{&quot;tn&quot;:&quot;C&quot;}" class="_5pbw" id="js_45"><span class="fwn fcg"><span data-ft="{&quot;tn&quot;:&quot;k&quot;}" class="fwb fcg"><a data-hovercard="/ajax/hovercard/page.php?id=155417167835918&amp;extragetparams=%7B%22fref%22%3A%22nf%22%7D" href="https://www.facebook.com/zuck/?fref=nf" aria-owns="js_57" aria-haspopup="true" aria-describedby="js_58" id="js_59">Mark Zuckerberg</a></span></span></h5>
                    <div class="_5pcp">
                        <span><span class="fsm fwn fcg"><a target="" href="/zuck/posts/1093538600690432" class="_5pcq">
                            <abbr class="_5ptz timestamp livetimestamp" data-shorten="1" data-utime="1448936808" title="Tuesday, December 1, 2015 at 7:56am">
                                <span class="timestampContent" id="js_46">7 hrs</span>
                            </abbr>
                        </a>
                        </span>
                        </span><span aria-hidden="true" role="presentation">· </span><a role="button" href="#" class="uiStreamPrivacy inlineBlock fbStreamPrivacy fbPrivacyAudienceIndicator _5pcq" aria-label="Public" data-hover="tooltip"><i class="lock img sp_uTzdBspOD9E sx_011d25"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="clearfix _5x46">
    <a data-hovercard="/ajax/hovercard/page.php?id=155417167835918" data-ft="{&quot;tn&quot;:&quot;\u003C&quot;}" tabindex="0" aria-hidden="true" href="https://www.facebook.com/elon/?ref=nf" class="_5pb8 _29h _303" aria-owns="js_4u" aria-haspopup="true" aria-describedby="js_4v"
        id="A1">
        <div class="_38vo">
            <img alt="" src="https://scontent.fmaa1-2.fna.fbcdn.net/hprofile-xaf1/v/t1.0-1/p50x50/12122890_1080690385308587_866657847317635965_n.jpg?oh=4523c96bbb805f5f4228fc4fc2ff32b0&amp;oe=56EC4A34" class="_s0 _5xib _5sq7 _44ma _rw img">
        </div>
    </a>
    <div class="_3dp _29k">
        <div>
            <div class="_6a">
                <div style="height: 40px" class="_6a _6b"></div>
                <div class="_6a _6b">
                    <h5 data-ft="{&quot;tn&quot;:&quot;C&quot;}" class="_5pbw" id="H1"><span class="fwn fcg"><span data-ft="{&quot;tn&quot;:&quot;k&quot;}" class="fwb fcg"><a data-hovercard="/ajax/hovercard/page.php?id=155417167835918&amp;extragetparams=%7B%22fref%22%3A%22nf%22%7D" href="https://www.facebook.com/elon/?fref=nf" aria-owns="js_57" aria-haspopup="true" aria-describedby="js_58" id="A2">Elon Musk</a></span></span></h5>
                    <div class="_5pcp">
                        <span><span class="fsm fwn fcg"><a target="" href="/elon/posts/11563538600690432" class="_5pcq">
                            <abbr class="_5ptz timestamp livetimestamp" data-shorten="1" data-utime="1448936808" title="Tuesday, December 1, 2015 at 7:56am">
                                <span class="timestampContent" id="Span1">7 hrs</span>
                            </abbr>
                        </a>
                        </span>
                        </span><span aria-hidden="true" role="presentation">· </span><a role="button" href="#" class="uiStreamPrivacy inlineBlock fbStreamPrivacy fbPrivacyAudienceIndicator _5pcq" aria-label="Public" data-hover="tooltip"><i class="lock img sp_uTzdBspOD9E sx_011d25"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题