Develop Reference

How to insert HTML between 2nd and 3rd paragraph tags in a class?

I have this bit of HTML. I want to insert in the div class content between 2nd and 3rd paragraph tag. I saw .insertAfter() and .insertBefore(). How to do this in plain vanilla JS?
<div class="content">
<div class="lead-image"><img src="/rf/Image-621x414/LiveMint/Period2/2017/10/13/Photos/Processed/bhart-kvpG--621x414#LiveMint.JPG" alt="Vodafone-Idea combine is ahead by a sizeable margin. Photo: Pradeep Gaur/Mint" class="img-responsive">
<div class="img-caption">In a few quarters, Airtel will end up as a clear market leader in terms of revenue market share, even though currently, the Vodafone-Idea combine is ahead by a sizeable margin. Photo: Pradeep Gaur/Mint</div>
</div>
<p xmlns:fn="http://www.w3.org/2005/xpath-functions" class="A5l">After Telenor ASA decided to hand over its India mobile business to Bharti Airtel Ltd for free, the Tata group has done the same. In the June quarter, revenues of these companies together stood at Rs3,202 crore, or nearly $2 billion on an annualized basis. Sure, since Tata’s non-mobile businesses, such as broadband, are being retained, the actual revenue that could potentially accrue to Airtel could be lower.</p>
<p>Still, even using conservative estimates, the Tatas are transferring at least a $1 billion business to Airtel for free. Telenor’s annualized revenues stood at $606 million in the June quarter. </p>
<p>In fact, the Tatas have gone a step further compared to Telenor. For the latter, Airtel agreed to take over outstanding spectrum payments, other operational contracts such as tower leases and employees. But the deal with the Tatas is even sweeter; it will take over only a portion of outstanding spectrum payments and it’s not clear whether operational contracts and employees are part of the deal.</p>
<p>The simple reason Airtel is able to strike such deals is that it is the only buyer in the market. Vodafone India Ltd and Idea Cellular Ltd have enough on their plate with their own merger, and the last thing they would want to engage with is the integration of another telco. Reliance Jio Infocomm Ltd, after having spent Rs2 trillion already in building its network, appears self-sufficient. Of course, these are also distress sales, given the high-cash burn at these companies. For sellers, therefore, one big hope is if Airtel evinces some interest. The only other option is to wind down the business, which entails far higher costs. </p>
<p>A Tata Sons executive told <i>Mint</i> the cost of winding down the business would have been about Rs8,000 crore higher than the current arrangement. Knowing this well, Airtel has stayed shy of rushing into deals, and has waited till sellers agree to its terms.</p>
<div class="mobile-ad">
<div id="div-gpt-ad-1492578481854-0" style="height: 250px; width: 300px; display: none;">
<script>
googletag.cmd.push(function() {
googletag.display('div-gpt-ad-1492578481854-0');
});
</script>
<div id="google_ads_iframe_/3106570/LM_WAP_Story_300x250_Top_0__container__" style="border: 0pt none;">
<iframe id="google_ads_iframe_/3106570/LM_WAP_Story_300x250_Top_0" title="3rd party ad content" name="google_ads_iframe_/3106570/LM_WAP_Story_300x250_Top_0" width="300" height="250" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" style="border: 0px; vertical-align: bottom;"></iframe>
</div>
</div>
</div>
<p></p>
<p>This puts it in an enviable position; such takeovers help grow market share as well as help plug gaps in its spectrum portfolio at a fairly low cost. In addition, with Vodafone and Idea busy with the merger process, and given the uncertainty among their employees, Airtel can grab market share from its large rivals as well.</p>
<p></p>
<div id="chart-box">
<img class="img-responsive" src="/r/LiveMint/Period2/2017/10/13/Photos/Processed/w_m2m_infratel-kvpG--414x621#LiveMint.jpg" title="">
<div class="zoom_icon"><a class="zoom-icon" href="/r/LiveMint/Period2/2017/10/13/Photos/Processed/w_m2m_infratel-kvpG--414x621#LiveMint.jpg" title="">Click here for enlarge</a></div>
</div>
<link href="/r/PortalConfig/LiveMint/static_content/css/v2/lightbox.css" type="text/css" rel="stylesheet">
<p></p>
<p>However, when things improve—hopefully with Jio’s approval for higher tariffs—Airtel can be expected to be in a fairly strong position as it gobbles up small telcos one after another and also gains share from other companies.</p>
<div class="story-meta"><span>First Published: </span>Fri, Oct 13 2017. 07 16 AM IST
<div class="story-tags">Topics: Airtel Tata Teleservices Airtel Tata Tele acquisition Airtel acquisitions Telenor ASA </div>
</div>
</div>
I am trying to do it in the best possible way. The class name is unique and I can then iterate through. What is the right way?

var myfirstcontent = document.getElementsByClassName('content')[0];
//find paragraphs
var ps = myfirstcontent.getElementsByTagName("p");
// Create a new, plain <div> element
var newdiv1 = document.createElement("div");
// put content etc in the div here...
// Get a reference to the paragraph we want to insert the new div after
var p2 = ps[1];
// Get a reference to the parent element
var parent = p2.parentNode;
// insert after
parent.insertBefore(newdiv1 , p2.nextSibling);
Note if there is no nextSibling it just gets appended to the parent node at the end as that returns null.

How about this?
var div = document.querySelector('div.content');
var thirdP = document.querySelectorAll('div.content > p')[2];
var newDiv = document.createElement('div');
newDiv.innerHTML = '***';
div.insertBefore(newDiv, thirdP);

the speack function i.e articulate js which is not working

I'm using articulate.js to add text to speech to the website. the code is as follows :
<body>
<div class="articulate-area">
<button onclick="speak('article')">Speak All</button>
<button onclick="speak('div.intro')">Speak Intro</button>
<button onclick="speak('div.speech')">Speak Speech</button>
<button onclick="pause()">Pause</button>
<button onclick="resume()">Resume</button>
</div>
<article>
<div class="intro">
<h1>The Gettysburg Address</h1>
<h2>Delivered by Abraham Lincoln on November 19, 1863</h2>
<h3>Beginning with the iconic phrase <q>Four score and seven years ago,</q> this speech is generally regarded as the most famous in American history.</h3>
</div>
<div class="speech">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/915932/lincoln.jpg" alt="A Portrait of the Sixteenth President">
<p>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.</p>
<p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.</p>
</div>
</article>
<body>
<script>
function speak(obj) {
$(obj).articulate('speak');
};
function pause() {
$().articulate('pause');
};
function resume() {
$().articulate('resume');
};
</script>
the above is the code to add tts to the webpage which is not working , do i need to add any other script to the webpage ?? the official articulate.js website tells that , it is compatible with chrome. but i'm not getting the speech output.

You should add jquery at the beginning https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js

How to print a hidden div content using jquery?

I have an anchor button and a hidden div. I write a code to print the content of div. But some time its shows the content in print file and some time it is blank. Please help me
<div class="row-fluid printdiv" id="printdiv" style="display:none;">
<div class="col-md-8 indexleft">
<div class="blog">
<!-- blog details -->
<div class="blogdetail row-fluid">
<div class="col-md-5">
<figure><img src="images/24hr-Gym-Logo-2014-698x198.jpg" alt="" /></figure>
</div>
<div class="col-md-7">
<div class="title">
<h2>Relief For Chronic Back Pain 1</h2>
</div>
<div class="writer">
<label>Writtern By :- </label>
Bev Matushewski</div>
</div>
</div>
<!-- blog text -->
<div class="blogtext row-fluid">
<p>“Back problems are among the most common chronic conditions in Canada. Four out of five adults will experience at least one episode of back pain at some time in their lives. It can be highly disabling, it may cause significant work loss, and reduce the quality of life for the individual. Over the years that I have been teaching the Alexander Technique, I estimate that 75% of my students come because of pain. It could be back or neck pain, pain from injuries that have been slow to recover or pain from working at the computer for long hours. Singers, actors, musicians, dancers or people who just want to develop more self-awareness and self-growth make up the rest.</p>
<p>Back pain can occur at any point of the spine, and is characterized by a range of symptoms including pain, muscle tension or stiffness, weakness in the legs or feet, and a possible tingling or burning sensation. It is often caused by strain on muscles and ligaments that support the spine. Lower back problems are most common, because it bears the most weight and physical stress. The discs in the lumbar spine are often subjected to constant pressure by exaggerated bending and postural distortion which can impinge on the spinal cord or one of its outlet nerves. It may result not only in back pain but also in pain travelling down the leg. This condition is usually known as “sciatica”.</p>
<p>If you have back pain and you would like to try the Alexander Technique, it is important to ask why you have back pain. There are many causes for back pain such as infections or injuries. Please consult your doctor, if your pain is sudden or acute. Teachers of the Alexander Technique are not trained in diagnosing your issue medically. If you are in doubt, see your GP.</p>
<p>Secondly, you may ask yourself, if your pain is life-style related. In most cases, it is. Unconsciously, we develop movement habits that harm our bodies, and we often use too much effort in all our daily activities. For instance, sitting all day at the computer with poor posture can contribute to back pain. Activities in the house done with too much strain might create back pain. Even sports activities such as running, if done badly, make pain more likely. Most often, ongoing postural habits are the causing or contributing factor for many back problems. This is when the Alexander Technique can help you.</p>
</div>
</div>
</div>
<!-- side bar -->
<div class="col-md-4 blogright">
<!--<h2 class="color-text" style="color:#000000;">Our Features</h2>-->
<!--div>
<div><img src="/images/yoga-add3.jpg"> </div>
</div-->
<section id="calender" class="stag-custom-widget-area ">
<aside id="text-22" class="widget widget_text">
<div class="textwidget"><br>
<div class="row">
<div class="col-md-12" style="float:left"> <img src="http://foreverfit.today/wp-content/uploads/2014/12/rock_ad.jpg" height="200" width="300"> </div>
Lorem ipsum here Lorem ipsumLor sumLorem ipsumL orem ipsumLo rem ipsumLorem ips umLorem ipsumLorem ipsum Lorem ipsum here Lorem ipsumLor sumLorem ipsumL orem ipsumLo rem ipsumLorem ips umLorem ipsumLorem ipsum
</div>
</div>
</aside>
</section>
</div>
<!-- end of side bar -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function printbox(){
var content = $('#printdiv').html();
var printWindow = '<html><head><title>my div</title><link rel="stylesheet" href="css/print.css" /></head><body>'+ content +'</body></html>';
mywindow = window.open('', 'print div', 'height=400,width=600');
mywindow.document.write(printWindow);
mywindow.print();
return true;
}
$(function(){
$('#printbtn').click(function(e) {
printbox();
});
});
</script>

Just delaying the call of your print by a short amount of time will give your browser the time to actually write the content into the printWindow.
You can achieve this by replacing the line
mywindow.print();
with
setTimeout(function(){ mywindow.print() }, 100);
This will delay the print() call and should solve your problem.

How to execute scrollTop after a slideUp

I'm having trouble with a post feed.
Basically, it's a list of banners and titles, with content divs hidden in the CSS. When you click on a title, the relevant content div slides down. At the same time, any other open divs slide up, so that you can only view one article at a time. The page then scrollTops to the top of the relevant banner div.
Here's a jsFiddle: http://jsfiddle.net/JGuilford/VzVCD/
The HTML:
<!-- Content area -->
<div id="content" class="site-content" role="main">
<!-- First Post -->
<!-- Header -->
<article id="post1" class="standard post">
<header class="entry-header">
<div class="entry-thumbnail">
<div class="entry-thumbnail-text">
<h1 class="entry-title-thumbnail-active">
Post1
</h1>
</div>
<!-- .entry-thumbnail-text -->
<img width="750" height="270" src="http://twentythirteendemo.wordpress.com/wp-content/themes/pub/twentythirteen/images/headers/circle.png" alt="banner img">
</div>
<!-- .entry-thumbnail -->
</header>
<!-- .entry-header -->
<!-- Article Content -->
<div class="entry-content-thumbnail" id="content-1">
<p>See the child. He is pale and thin, he wears a thin and ragged linen shirt. He stokes the scullery fire. Outside lie dark turned fields with rags of snow and darker woods beyond that harbour yet a few last wolves. His folks are known for hewers of wood and drawers of water but in truth his father has been a schoolmaster. He lies in drink, he quotes from poets whose names are now lost. The boy crouches by the fire and watches him.</p>
<p>Night of your birth. Thirty-three. The Leonids they were called. God how the stars did fall. I looked for blackness, the holes in the heavens. The Dipper stove.</p>
<p>The mother dead these fourteen years did incubate in her own bosom the creature who would carry her off. The father never speaks her name, the child does not know it. He has a sister in this world that he will not see again. He watches, pale and unwashed. He can neither read nor write and in him broods already a taste for mindless violence. All history present in that visage, the child the father of the man.</p>
<p>At fourteen he runs away. He will not see again the freezing kitchenhouse in the predawn dark. The firewood, the washpots. He wanders west as far as Memphis, a solitary migrant upon that flat and pastoral landscape. Blacks in the fields, lank and stooped, their fingers spiderlike among the bolls of cotton. A shadowed agony in the garden. Against the sun’s declining figures moving in the slower dusk across a paper skyline. A lone dark husbandman pursuing mule and harrow down the rainblown bottomland toward night.</p>
</div>
</article>
<!-- Second Post -->
<!-- Header -->
<article id="post2" class="standard post">
<header class="entry-header">
<div class="entry-thumbnail">
<div class="entry-thumbnail-text">
<h1 class="entry-title-thumbnail-active">
Post2
</h1>
</div>
<!-- .entry-thumbnail-text -->
<img width="750" height="270" src="http://twentythirteendemo.wordpress.com/wp-content/themes/pub/twentythirteen/images/headers/circle.png" alt="banner img">
</div>
<!-- .entry-thumbnail -->
</header>
<!-- .entry-header -->
<!-- Article Content -->
<div class="entry-content-thumbnail" id="content-2">
<p>See the child. He is pale and thin, he wears a thin and ragged linen shirt. He stokes the scullery fire. Outside lie dark turned fields with rags of snow and darker woods beyond that harbour yet a few last wolves. His folks are known for hewers of wood and drawers of water but in truth his father has been a schoolmaster. He lies in drink, he quotes from poets whose names are now lost. The boy crouches by the fire and watches him.</p>
<p>Night of your birth. Thirty-three. The Leonids they were called. God how the stars did fall. I looked for blackness, the holes in the heavens. The Dipper stove.</p>
<p>The mother dead these fourteen years did incubate in her own bosom the creature who would carry her off. The father never speaks her name, the child does not know it. He has a sister in this world that he will not see again. He watches, pale and unwashed. He can neither read nor write and in him broods already a taste for mindless violence. All history present in that visage, the child the father of the man.</p>
<p>At fourteen he runs away. He will not see again the freezing kitchenhouse in the predawn dark. The firewood, the washpots. He wanders west as far as Memphis, a solitary migrant upon that flat and pastoral landscape. Blacks in the fields, lank and stooped, their fingers spiderlike among the bolls of cotton. A shadowed agony in the garden. Against the sun’s declining figures moving in the slower dusk across a paper skyline. A lone dark husbandman pursuing mule and harrow down the rainblown bottomland toward night.</p>
</div>
</article>
<!-- Third Post -->
<!-- Header -->
<article id="post3" class="standard post">
<header class="entry-header">
<div class="entry-thumbnail">
<div class="entry-thumbnail-text">
<h1 class="entry-title-thumbnail-active">
Post3
</h1>
</div>
<!-- .entry-thumbnail-text -->
<img width="750" height="270" src="http://twentythirteendemo.wordpress.com/wp-content/themes/pub/twentythirteen/images/headers/circle.png" alt="banner img">
</div>
<!-- .entry-thumbnail -->
</header>
<!-- .entry-header -->
<!-- Article Content -->
<div class="entry-content-thumbnail" id="content-3">
<p>See the child. He is pale and thin, he wears a thin and ragged linen shirt. He stokes the scullery fire. Outside lie dark turned fields with rags of snow and darker woods beyond that harbour yet a few last wolves. His folks are known for hewers of wood and drawers of water but in truth his father has been a schoolmaster. He lies in drink, he quotes from poets whose names are now lost. The boy crouches by the fire and watches him.</p>
<p>Night of your birth. Thirty-three. The Leonids they were called. God how the stars did fall. I looked for blackness, the holes in the heavens. The Dipper stove.</p>
<p>The mother dead these fourteen years did incubate in her own bosom the creature who would carry her off. The father never speaks her name, the child does not know it. He has a sister in this world that he will not see again. He watches, pale and unwashed. He can neither read nor write and in him broods already a taste for mindless violence. All history present in that visage, the child the father of the man.</p>
<p>At fourteen he runs away. He will not see again the freezing kitchenhouse in the predawn dark. The firewood, the washpots. He wanders west as far as Memphis, a solitary migrant upon that flat and pastoral landscape. Blacks in the fields, lank and stooped, their fingers spiderlike among the bolls of cotton. A shadowed agony in the garden. Against the sun’s declining figures moving in the slower dusk across a paper skyline. A lone dark husbandman pursuing mule and harrow down the rainblown bottomland toward night.</p>
</div>
</article>
The JQuery:
$(document).ready(function () {
$(".entry-title-thumbnail-active").click(function () {
$(this).closest('.site-content').find('.entry-content-thumbnail').not($(this).closest('article').find('.entry-content-thumbnail')).slideUp('slow');
$(this).closest('article').find('.entry-content-thumbnail').slideToggle(
'slow', 'swing', $('html,body').animate({
scrollTop: $(this).offset().top
}, 'slow'));
return false;
});
});
The problem is that, if an article is already open above the one the user is clicking open, then when it closes, the clicked title scrolls up and out of view. Basically, I can't figure out how to get scrollTop to use the final position of the clicked .entry-title-thumbnail-active rather than its initial position. To see what I mean, open the jsFiddle and click on Post 2, then Post 3. The article for Post 3 will expand, the article for Post 2 will collapse, but the window will try to scroll to the title for Post 3's initial position, rather than its position after Post 2 collapses.
Does anyone know how to fix this?

The complete method on .slideToggle() is a function. See the slideToggle docs
So it should be:
$(".entry-title-thumbnail-active").click(function () {
$(this).closest('.site-content').find('.entry-content-thumbnail').not($(this).closest('article').find('.entry-content-thumbnail')).slideUp('slow');
$(this).closest('article').find('.entry-content-thumbnail').slideToggle(
'slow', function () {
$('html,body').animate({
scrollTop: $(this).offset().top
}, 'slow')
});
return false;
});
You also don't need to set 'swing' because it's already the default applied easing.
Check this jsfiddle.

Move an element from div to anther - not working

I am trying to MOVE Grid3 to Grid2 - and I am using This code, but it's not working, what I am doing wrong?
Also is there anyway to move half of the Div's in Grid3 to Grid1, and the other half to Grid2?
JS
$("#grid3").appendTo("#grid2");
HTML
<div class="wrapperA1">
<div class="content">
<div id="home-sectionD">
<div id="grid1"><!--Gird 1-->
<article class="testimonial">
<img alt="Neal Kilburne​​" src="assets/images/neal kilburne​​.jpg"/>
<div>
<h3>Neal Kilburne​​</h3>
<p>CEO, iTEQ Global www.iteqglobal.com</p>
<br>
<p>“Loai is a great asset to our company and provides us with great and quick responses,Such a talented designer which we have the honour of working with.” 2011 - 2012</p>
</div>
</article>
<article class="testimonial">
<div>
<h3>Amanda Chui​</h3>
<p>Owner of www.beautyroom.ca</p>
<br>
<p>Just what my website needed! When I had finished my website, I felt that it was missing something,so I enlisted in the help of Loai. He did a great job of giving my website the professional and polished look it needed without having me wait for days on end. Thanks, Loai!” June 23, 2012</p>
</div>
</article>
</div><div id="grid2"><!--Gird 2-->
<article class="testimonial">
<img alt="Geeta Martinez" src="assets/images/geeta martinez.jpg"/>
<div>
<h3>Geeta Martinez</h3>
<p>Lawyer & Business Consultant</p>
<br>
<p>"Leo did a great job! He designed and put together several websites for me in less than a week. He was incredibly patient and flexible throughout the whole process, and took a lot of the stress out of the whole situation for me. He is a really nice guy to work with - I really appreciated his approach! I would definitely recommend working with him". July 14, 2013</p>
</div>
</article>
<article class="testimonial">
<div>
<h3>Richard Jackson</h3>
<p><em>Photographer www.rjpstudios.co.uk​</em></p>
<br>
<p>“Loai designed my website last year on wix though I could have done it myself loai added a proffesional touch to the design which is so important in creating the best first impeson.” 2013</p>
</div>
</article>
</div><div id="grid3"><!--Gird 3-->
<article class="testimonial">
<img alt="Glen Eric Huysamer" src="assets/images/glen eric huysamer.jpg"/>
<div>
<h3>Glen Eric Huysamer​</h3>
<p>Specialist Service Provider.</p>
<br>
<p>“I would like to take this opportunity to warn people who might consider using Loai Design Studio. You will have to buckle up and strap yourself in as this young designer and associates take you through the process of creating your design needs. I was pleasantly surprised from start to finish, and can say that even though Loai took control of the creative process the end result felt like it was mine. You can not go wrong with this young lad, go ahead surprise yourself”. December 30, 2011</p>
</div>
</article>
<article class="testimonial">
<div>
<h3>Ciprian Filip​</h3>
<p>Founder of Pontomat.ro​</p>
<br>
<p>“Worked with Loai on designing exposure of our social media presence on Facebook for our E-commerce initiative. He is very passionate and expert in his field of work, coming with breakthrough innovations in real time. He is able to manage an end to end social media exposure with accent on clarity, effectiveness and innovation. His working capabilities are awesome and I am sure that he will make good contribution to any project he works on.” August 4, 2011</p>
</div>
</article>
</div>
</div>
</div>
</div>

Seems to be working for me (http://jsfiddle.net/k2NMD/9/).
You may be calling append too early, before the browser has actually processed all of the html. Try wrap your append function in a $(document).ready() function.
$(document).ready(function () {
$("#grid3").appendTo("#grid2");
});

The move does work (if you are running the code after the document has loaded such as in $(document).ready() event). Check in the developer console for the elements (if you are using Chrome) to see that #grid3 is actually inside #grid2 like so
<div id="grid2">...
<article...>
<article...>
<div id="grid3">...
</div>
If you would like to move the contents of grid3 inside grid2, then you have to get the articles using $('#grid3').find('article').appendTo('#grid2') and that will remove the articles from grid3 and insert it into grid2. Moving parts of it can be accomplished by separating the article and insert one into grid1 and the other into grid2.