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

【问题标题】：Dynamically add item to an existing list将项目动态添加到现有列表
【发布时间】：2012-08-27 04:14:22
【问题描述】：

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

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

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

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

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

【问题讨论】：

您的实际标记是否有重复的 ID？那是无效的 HTML。 ID 属性在 DOM 中必须是唯一的。改用类。

标签： javascript html loops dynamic

【解决方案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);

【讨论】：

两种解决方案都适用于静态内容，因此感谢您！不幸的是，我将它添加到 Wordpress 循环中，在这种情况下它不起作用。

【解决方案2】：

如果你得到一个整数，让 div id 成为索引。这样你就可以使用document.getElementById('post'+id).innerHTML 追加。

【讨论】：

修改一个元素的 innerHTML 不会在它之后附加另一个元素（根据 OP），它会将它插入到元素中。

【解决方案3】：

您的方法完全错误，对元素执行 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

或

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

【讨论】：

你有一些错误，insertBefore 的参数被颠倒了，新节点应该插入索引之后，所以在 nextSibling 之前（如果 OP 有索引对，它似乎在索引 3) 之后指示。附加行应为...insertBefore(div, posts[insert].nextSibling)。

【解决方案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/

【讨论】：