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="{"tn":"\u003C"}" 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&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="{"tn":"C"}" class="_5pbw" id="js_45"><span class="fwn fcg"><span data-ft="{"tn":"k"}" class="fwb fcg"><a data-hovercard="/ajax/hovercard/page.php?id=155417167835918&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="{"tn":"\u003C"}" 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&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="{"tn":"C"}" class="_5pbw" id="js_45"><span class="fwn fcg"><span data-ft="{"tn":"k"}" class="fwb fcg"><a data-hovercard="/ajax/hovercard/page.php?id=155417167835918&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.
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="{"tn":"\u003C"}" 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&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="{"tn":"C"}" class="_5pbw" id="js_45"><span class="fwn fcg"><span data-ft="{"tn":"k"}" class="fwb fcg"><a data-hovercard="/ajax/hovercard/page.php?id=155417167835918&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="{"tn":"\u003C"}" 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&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="{"tn":"C"}" class="_5pbw" id="H1"><span class="fwn fcg"><span data-ft="{"tn":"k"}" class="fwb fcg"><a data-hovercard="/ajax/hovercard/page.php?id=155417167835918&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>