1

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

下面是一个 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++;
  }
}
4

4 回答 4

2

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

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

如果你想用纯 JavaScript 来做，那么看看这个问题。基本思想是：

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);
于 2012-08-27T04:19:16.137 回答
0

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

于 2012-08-27T04:20:18.653 回答
0

你的方法都是错误的，在一个元素上做一个 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

于 2012-08-27T04:40:09.043 回答
0

您可以为新的 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/jner​​ator /5nCeV/

于 2012-09-30T22:55:27.280 回答