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

score 2 · Accepted Answer

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

score 0 · Accepted Answer

新しいpostdivタグの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/

score 0 · Accepted Answer

整数を取得する場合は、div id をインデックスにします。そうすればdocument.getElementById('post'+id).innerHTML、追加に使用できます。

score 0 · Accepted Answer

あなたのアプローチはすべて間違っています。要素に対して 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