Home JavaScript insert the href value after each parent div
Reply: 1

JavaScript insert the href value after each parent div

Human Bot
1#
Human Bot Published in 2015-12-01 10:57:25Z

Well, I'm trying to get href value from the span with class fsm fwn fcg & insert that url just after the each div with class clearfix _5x46 from the below HTML Code.

<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>

The DOM structure is from the facebook.com web version. Each div with class clearfix _5x46 will be repeated. I'm able to find the href value from the below code but no idea how to insert the value just after each div with class clearfix _5x46 in native JavaScript.

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

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

Please provide how to insert those href after each div with class clearfix _5x46. Thanks In Advance.

Mosh Feu
2#
Mosh Feu Reply to 2015-12-02 12:46:28Z

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);
});
.href {
  background:silver;
  padding:10px;
}
<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>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.310841 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO