Javascript 动态地将项添加到现有列表中

我需要动态地将一个元素插入到现有的博客文章列表中

以下是HTML的一个示例：

<div id="page">
  <div id="post">Post Content</div>
  <div id="post">Post Content</div>
  <div id="post">Post Content</div>
  <div id="post">Post Content</div>
  <!---- Dynamic Post Inserted Here--->
  <div id="post">Post Content</div>
  <div id="post">Post Content</div>
</div>

---

如果您使用jQuery，这将非常简单

$('#post4').after('<div id="post5">new post content</div>');

在您的情况下，需要创建一个

div

节点并直接附加到文档中

var newpost = document.createElement('div');
newpost.id = 'post5';
newpost.innerText = newpost.textContent = "new post content";

var post = document.getElementById('post4');

post.parentNode.insertBefore(newpost, post.nextSibling);

---

如果您得到的是一个整数，请将div id作为索引。这样，您就可以使用

document.getElementById（'post'+id.）.innerHTML

进行追加。

您的方法是完全错误的，对元素执行“for each”操作不会为您提供其子节点，而是提供其属性键。您可以使用getElementsByTagName或querySelector来实现您的目标

var posts = docuemnt.getElementById('page').getElementsByTagName('div');
var insert = 4;
var newPost = "new post content";
var div = document.createElement('div');
div.appendChild(document.createTextNode(newPost ));
posts[insert].parentNode.insertBefore(div, posts[insert]);//index are zero based so element 4 is actually the 5th element

或

---

您可以为新的post div标记创建jtag，并调用.dom（）函数来接收div元素。试试图书馆

function addPost() {
    var lastPostElement = page.lastChild;
    var count = page.childNodes.length;
    var postText = tagPost.value;
    var jtag = $j.div({ id: 'post' + count, child: postText });
    var newPostElement = jtag.dom();
    page.insertBefore(newPostElement, lastPostElement);
}

---

请参见此处的示例：

您的实际标记是否有重复的ID？这是无效的HTML。ID属性在DOM中必须是唯一的。改为使用类。您有一些错误，要反转的参数，新节点应该插入索引之后，所以在下一个索引之前（如果OP有索引权，它似乎指示在索引3之后）。追加行应该是

…insertBefore（div，posts[insert].nextSibling）

。修改一个元素的innerHTML不会在它后面追加另一个元素（根据OP），它会将它插入元素内部。这两种解决方案都能很好地处理静态内容，因此感谢！不幸的是，我将它添加到Wordpress循环中，在这种情况下它不起作用。

var posts = docuemnt.getElementById('page').getElementsByTagName('div');
var insert = 4;
var newPost = "new post content";
var div = document.createElement('div');
div.appendChild(document.createTextNode(newPost ));
posts[insert].parentNode.insertBefore(div, posts[insert]);//index are zero based so element 4 is actually the 5th element

var insert = 5;
var post = docuemnt.querySelector('#page > div:nth-child('+insert+')');//nth child index is one based
var newPost = "new post content";
var div = document.createElement('div');
div.appendChild(document.createTextNode(newPost ));
post.parentNode.insertBefore(div, post);

function addPost() {
    var lastPostElement = page.lastChild;
    var count = page.childNodes.length;
    var postText = tagPost.value;
    var jtag = $j.div({ id: 'post' + count, child: postText });
    var newPostElement = jtag.dom();
    page.insertBefore(newPostElement, lastPostElement);
}