javascript - 将项目动态添加到现有列表

Question

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

这是一个 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>

我创建了一个循环遍历帖子并返回位置的 for 循环，但返回的位置是一个整数，因此我无法将新帖子附加到该变量。那么将项目附加到我当前的帖子列表的最佳方式是什么？

我面前没有确切的功能，但这基本上就是我正在做的:

var post = docuemnt.getElementById('post');
var page = docuemnt.getElementById('page');
var pc = 0;
var insert = 5;
var newPost = "new post content";

for(post in page){
  if(pc == insert){
    **append new post content after this post**
  }else{
  pc++;
  }
}

Answer 1

如果您使用的是 jQuery，这将非常容易。

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

如果你想用纯 JavaScript 来做，那么 take a look at this question .基本思想是:

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

在您的情况下，您需要创建一个 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);