Javascript:如何在每个帖子或内容部分的第二个通用“p”标签(没有ID或类)之后添加“div”元素?

时间:2013-06-16 01:52:22

标签: javascript html dom createelement

如何在我希望它所在的每个页面的内容部分中插入第二个通用(无添加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>

2 个答案:

答案 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