Javascript：如何在每个帖子或内容部分内的第二个通用“p”标签（无 ID 或类）之后添加“div”元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17129490/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: How to add "div" element right after 2nd generic "p" tag (w/o ID nor Class) inside of every post or content section?
提问by netizen0911
How do I go about inserting a custom "div" element that appears right after 2nd generic (w/o adding ID or Class) "p" node/tag in the content section of every pages I want it to be in, by using JavaScript?
如何通过使用 JavaScript 在我希望它所在的每个页面的内容部分中插入第二个通用（不添加 ID 或类）“p”节点/标签之后出现的自定义“div”元素?
For example:
例如：
<div id="main-content">
<p>1st paragraph content.....</p>
<p>2nd paragraph content.....</p>
<p>3rd paragraph content.....</p>
</div>
The output:
输出：
<div id="main-content">
<p>1st paragraph content.....</p>
<p>2nd paragraph content.....</p>
<div id="custom-div">Content here...</div>
<p>3rd paragraph content.....</p>
</div>
回答by isJustMe
Given your html:
鉴于您的 html：
<input type='button' onclick='addText();' value='Add To List'/>
<input type='text' id='input'/>
<div id="main-content">
<p>1st paragraph content.....</p>
<p>2nd paragraph content.....</p>
<p>3rd paragraph content.....</p>
</div>
And since you didn't mention jQuery I will provide an answer with plain Javascript:
既然你没有提到 jQuery，我将提供一个简单的 Javascript 答案：
var appender=1;
function addText(){
var parentDiv = document.getElementById('main-content');
var input = document.getElementById('input').value;
var node = document.createElement("DIV");
var textnode = document.createTextNode(input);
node.appendChild(textnode);
node.id = 'custom-div_' + appender;
var child = parentDiv.children[2];
parentDiv.insertBefore(node, child);
appender++;
}
Here is a working demo
这是一个工作演示
Note that there is a global varso you can assign different ID's to your dynamically created elements.
请注意，有一个全局var变量，因此您可以为动态创建的元素分配不同的 ID。
Edit
编辑
As per user request, the following code will add that content on load :
根据用户请求，以下代码将在加载时添加该内容：
<body onload="addText()">
<div id="main-content">
<p>1st paragraph content.....</p>
<p>2nd paragraph content.....</p>
<p>3rd paragraph content.....</p>
</div>
</body>
Here is the updated Javascript:
这是更新后的 Javascript：
var appender=1;
function addText(){
var parentDiv = document.getElementById('main-content');
var node = document.createElement("DIV");
var textnode = document.createTextNode("This was added dinamically");
node.appendChild(textnode);
node.id = 'custom-div_' + appender;
var child = parentDiv.children[2];
parentDiv.insertBefore(node, child);
appender++;
}
Here is the new demo
这是新的演示
Note that the variable appender is not longer needed I'm leaving in case you want to merge functionality.
请注意，如果您想合并功能，我将不再需要变量 appender。
回答by Esgi Dendyanri
I think the simplest way is like this,
我觉得最简单的方法是这样的
var node = document.createElement("div");
var textnode = document.createTextNode('Content here...');
node.appendChild(textnode);
node.id = 'custom-div';
var referencenode = document.getElementById('main-content').children[1];
referencenode.parentNode.insertBefore(node, referencenode.nextSibling);
the code "referencenode.parentNode.insertBefore(node, referencenode.nextSibling);" will insert the node into after your selected element,
代码“referencenode.parentNode.insertBefore(node,referencenode.nextSibling);” 将节点插入到您选择的元素之后，
here's the DEMO
这是演示
