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);

Answer 2

如果要获取整数，请将div id作为索引。这样您就可以使用document.getElementById('post'+id).innerHTML追加。

Answer 3

你的方法都是错的，在元素上为每个元素做一个不会给你的子节点但它的属性键。您可以使用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

或

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);

https://developer.mozilla.org/en-US/docs/DOM/Document.querySelector

https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore

https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByTagName

Answer 4

你可以为新的post div标签创建jtag并调用.dom（）函数来接收div元素。试试Jnerator库。

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);
}

请在此处查看示例：http://jsfiddle.net/jnerator/5nCeV/

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

4 个答案: