Question

我正在尝试生成此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>

＆lt; li＆gt;的值＆lt; ul＆gt;下的标签标签将是动态的

我正在尝试使用以下程序实现上述目标

//这是生成ul和li标签的代码。

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

有人可以帮助如何将动态生成的HTML添加到某个地方的其他动态生成的CSS中。

Answer 1

我相信我理解。你其实非常接近。在这里查看修改：

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

由于itemcart变量是一个字符串，我将uitaghtml更改为字符串，然后将其插入您想要列出的项目的位置。结束ul我调整了字符串，以减少一个连接。

Answer 2

您的代码的第一部分使用jQuery集合进行追加，因此最终您将uitaghtml作为jQuery集合。第二部分是一个字符串，为了将第一部分的结果添加到它，我们必须提取html字符串，如下所示：

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

现在这是你能做到的另一种方式，我最喜欢的。：

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

如何在特定位置添加动态生成的HTML

2 个答案: