Как добавить статический HTML до и после jquery prependTo внутри $.each

Question

У меня есть и массив и цикл через jQuery $.each для итерации и создания элементов html dom на лету и добавления их в DOM.

  $.each(res, function(key, ele){
        var stemtext = ele[0];
        var stemID = ele[1];
        var pageNo = ele[2];            
        //Build HTML here
        $('<div/>', {
            'id':stemID,
            'class':'text-paragraph',
            'style':'cursor:pointer;',
            'html': '<p style="width: 80%; float: left;">'+ stemtext +'</p><p style="width:20%; float:left">'+ stemID +'</p>'
        }).prependTo('#PlaceHolder');
    });

Этот код работает без нареканий.

Но мне нужно добавить статический HTML до и после этого сгенерированного HTML в цикле $.each, а затем добавить его. Я должен сделать это только в jQuery, не могу коснуться HTML.

Я пытался сохранить этот HTML-код в переменной, а затем добавить HTML, но не получилось,

Каков наилучший способ добавить статический HTML до и после сгенерированного HTML внутри цикла $.each?

Answer 1

Я не знаю, понимаю ли я вашу проблему, но с тем, что я понял, есть мое решение (я уверен, что есть лучший способ сделать это):

 $('<div/>', {
        'id':"todelete",
    }).prependTo('#PlaceHolder');


   $('<div/>', {
        'id':"stemID",
        'class':'text-paragraph',
        'style':'cursor:pointer;',
        'html': '<p style="width: 80%; float: left;">stem text</p><p style="width:20%; float:left">stemID</p>'
    }).prependTo('#todelete');

    $('<div/>', {
        'id':"elementBefore",
        'class':'text-paragraph',
        'style':'cursor:pointer;',
        'html': '<p>Before place holder</p>'
    }).prependTo('#todelete');

    $('<div/>', {
        'id':"elementAfter",
        'class':'text-paragraph',
        'style':'cursor:pointer;',
        'html': '<p >After place holder</p>'
    }).appendTo('#todelete');

    $("#stemID").unwrap();

LIVE DEMO JSFiddle