Question

我有以下代码：

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

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

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

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

DEMO- Fiddle

<小时/> OP更新问题

后更新

DEMO- Fiddle

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

Answer 3

<强> DEMO

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

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

<强> DEMO

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

}

<强> DEMO

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

创建Div并动态插入

4 个答案: