如何在我希望它所在的每个页面的内容部分中插入第二个通用(无添加ID或类)“p”节点/标记之后出现的自定义“div”元素,使用JavaScript?
例如:
<div id="main-content">
<p>1st paragraph content.....</p>
<p>2nd paragraph content.....</p>
<p>3rd paragraph content.....</p>
</div>
输出:
<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>
答案 0 :(得分:7)
鉴于你的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>
由于你没有提到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++;
}
这是一个有效的demo
请注意,有一个全局var
,因此您可以为动态创建的元素分配不同的ID。
修改
根据用户请求,以下代码将在加载时添加该内容:
<body onload="addText()">
<div id="main-content">
<p>1st paragraph content.....</p>
<p>2nd paragraph content.....</p>
<p>3rd paragraph content.....</p>
</div>
</body>
以下是更新的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++;
}
这是新的demo
请注意,我不再需要变量appender,以防你想要合并功能。
答案 1 :(得分:1)
我认为最简单的方法就是这样,
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);
代码&#34; referencenode.parentNode.insertBefore(node,referencenode.nextSibling);&#34;将在您选择的元素
之后插入节点这里是DEMO