我有这个HTML。我想在div class content之间插入第2个和第3个paragraph标记。我看到了。insertAfter()和.insertBefore()。如何在普通香草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 <a href="http://www.livemint.com/Money/mX1sT5Htjl7EqQLAwBMIDJ/Telenors-painful-exit-and-the-writing-on-the-wall.html" target="_blank">hand over its India mobile business to Bharti Airtel Ltd for free</a>, the Tata group has <a href="http://www.livemint.com/Industry/np5deDZO690meWCzkVENJK/Bharti-Airtel-Tata-to-merge-consumer-mobile-businesses.html" target="_blank">done the same</a>. 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">
<a href="/r/LiveMint/Period2/2017/10/13/Photos/Processed/w_m2m_infratel-kvpG--414x621@LiveMint.jpg" title=""><img class="img-responsive" src="/r/LiveMint/Period2/2017/10/13/Photos/Processed/w_m2m_infratel-kvpG--414x621@LiveMint.jpg" title=""></a>
<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: <a href="/Search/Link/Keyword/Airtel">Airtel</a> <a href="/Search/Link/Keyword/Tata Teleservices">Tata Teleservices</a> <a href="/Search/Link/Keyword/Airtel Tata Tele acquisition">Airtel Tata Tele acquisition</a> <a href="/Search/Link/Keyword/Airtel acquisitions">Airtel acquisitions</a> <a href="/Search/Link/Keyword/Telenor ASA">Telenor ASA</a> </div>
</div>
</div>
我试图以最好的方式做到这一点。类名是唯一的，然后我可以迭代。什么是正确的方法？
答案 0 :(得分：0)
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);
注意，如果没有nextSibling，它只会在末尾附加到父节点，因为它返回null。
答案 1 :(得分：0)
这个怎么样？
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);