CODEWITHSUNDEEP
jqueryhtml
Pawan
Pawan

Reputation: 32321

How to add dynamic generated HTML at a certain place

I am trying to generate this HTML .

  <div class="order-listdetails-wrap">
                <div class="orderTitle">Popcorn - 250g</div>
                <div class="orderCont">
                    <div class="img"><img src="images/img_popcorn.jpg"/></div>
                    <div class="orderPrice">
                        <p>Rs: <span>145</span></p>
                        <p>Qty: <span>1</span></p>
                        <ul>
                            <li>Butter Extra</li>
                            <li>Butter Extra</li>
                        </ul>
                    </div>
                </div>
            </div>

The values of <li> tags under <ul> tags will be dynamic

I am trying to achieve the above using the below procedure

// This is the code for generating ul and li tags .

     var uitaghtml = $('<ul>');
    for (var k = 0; k < toppgs.length; i++) {
        uitaghtml.append('<li>' + toppgs[k] + '</li>')
        }
    uitaghtml.append('</ul>');


// This is the code of above HTML without UL LI tags     
    var itemcart = '<div class="order-listdetails-wrap"> \
                            <div class="orderTitle">' + name + '</div> \
                            <div class="orderCont"> \
                                <div class="img"><img src="' + image + '"/></div> \
                                <div class="orderPrice"> \
                                    <p>Rs: <span>' + price + '</span></p> \
                                    <p>Qty: <span>' + quantity + '</span></p> \
                                </div> \
                            </div> \
                        </div>';
    divhtml.append(itemcart);

Could anybody please help how to add dynamic generated HTML to other dynamic generated css at a certain place .

Upvotes: 0

Views: 92

Answers (2)

PeterKA
PeterKA

Reputation: 24638

Your first part of the code uses jQuery collections to append, therefore in the end your have uitaghtml as a jQuery collection. The second part is a string and to add the result of the first part to it we have to extract the html string as follows:

var uitaghtml = $('<ul>');
for (var k = 0; k < toppgs.length; i++) {
    uitaghtml.append( $('<li/>').html( toppgs[k] ) )
}

// See how the html string of uitaghtml is extracted and combined to this
// string .... add string to string     
var itemcart = '<div class="order-listdetails-wrap"> \
<div class="orderTitle">' + name + '</div> \
<div class="orderCont"> \
<div class="img"><img src="' + image + '"/></div> \
<div class="orderPrice"> \
<p>Rs: <span>' + price + '</span></p> \
<p>Qty: <span>' + quantity + '</span></p> \
' + $('<div/>').html( uitaghtml ).html() + '\
</div> \
</div> \
</div>';

divhtml.append(itemcart);

And now here is another way you could do it, my favorite.:

var uitaghtml = $('<ul>');
for (var k = 0; k < toppgs.length; i++) {
    uitaghtml.append( $('<li/>').html( toppgs[k] ) )
}

var itemcart = $('<div/>').addClass('order-listdetails-wrap')
.html( $('<div/>').addClass('orderTitle').text( name ) )
.append(
    $('<div/').addClass('orderCont').html(
        $('<div/>').addClass('img').html( $('<img/>',{'src': image}) )
    )
    .append(
        $('<div/>').addClass('orderPrice').html(
            $('<p/>').text('Rs: ').append( $('<span/>').text(price) )
        )
        .append(
            $('<p>').text('Qty: ').append( $('<span/>').text(quantity) )
        )
        .append( uitaghtml )
    )
);

Upvotes: 0

user1932079
user1932079

Reputation:

I believe I understand. You were actually quite close. Check out the modification here:

var uitaghtml = '<ul>';
for (var k = 0; k < toppgs.length; i++) {
    uitaghtml += '<li>' + toppgs[k] + '</li>';
}

var itemcart = '<div class="order-listdetails-wrap"> \
                        <div class="orderTitle">' + name + '</div> \
                        <div class="orderCont"> \
                            <div class="img"><img src="' + image + '"/></div> \
                            <div class="orderPrice"> \
                                ' + uitaghtml + '</ul> \
                            </div> \
                        </div> \
                    </div>';
divhtml.append(itemcart);

Since the itemcart variable was a string, I changed uitaghtml to be a string and then inserted it where you wanted the items listed. The closing ul I tweaked to be in the string for one less concatenation.

Upvotes: 3

Related Questions