jquery - 创建 Div 并动态插入

Question

我有以下代码：

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

$('<p />', 
{
    'text': 'My Products'
}).appendTo('#one');
$('<li />').appendTo('#one');

如何在 div "two" 之前动态创建和插入它？<div id="one">另外我将如何处理我上面写的其余代码

Answer 1

$("<div id='one'></div>").insertBefore("#two");

你可以像下面这样处理你的代码

$('<p >My Products</p>').appendTo('#one');

参考insertBefore和appendTo

Answer 2

使用.insertBefore()

$('<div />', {
    'text': 'Test',
    id: 'one'
}).insertBefore( "#two" );

演示-小提琴

---

OP更新问题后更新

演示-小提琴

$('<div />', {
    'text': 'Test',
    id: 'one'
}).insertBefore("#two");
$('<p />', {
    'text': 'My Products'
}).appendTo('#one');

Answer 3

演示

<div id="content"></div>

var $cont = $('#content'),
    $p = $('<p />', {
        'text': 'My Products'
    }),
    $div = $('<div />', {
      'id'   : 'one',
      'html' : $p
    }).appendTo( $cont );

---

演示

var ids   = ['one','two','three'],
    texts = ['My products', 'About', 'Contact'],
    $cont = $('#content');

for(var i=0; i<ids.length; i++){

    var $p = $('<p />', {
      'text': texts[i]
    }),
    $div = $('<div />', {
      'id'   : ids[i],
      'html' : $p
    }).appendTo( $cont );

}

---

演示

var $cont = $('#content'),
    obj = {
       'one'   : 'My products',
       'two'   : 'About',
       'three' : 'Contact'
    },
    HTML = '';


for(var key in obj){
  if( obj.hasOwnProperty(key) ){
    HTML += "<p id='"+ key +"'>"+ obj.key +"</p>";    
  } 
} 

$cont.append( HTML ); // append only once. Faster!

Answer 4

你可以使用 .before 或 .insertBefore

 $('selector').before('new content');
 $('new content').insertBefore('selector');