Question

I have some div

<div id="editCatalogListItemHideMe">
    <div class="listItem">
        <table class="sectionTable">
            <tr>
                <td class="sectionLeft">
                    <span id="numberLabel"></span><span>:</span>
                </td>
                <td class="sectionCenter">
                    <span id="contentLabel"></span>
                </td>
                <td class="sectionRight">
                    <img runat="server" src="images/noselected.png" class="selectImage" />
                </td>
            </tr>
        </table>
    </div>
</div>

and i want to set text to numberLabel and contentLabel

$(document).ready(function () {
        var counter = 1;

        var content = ["val1", "val2", "val3", "val4", "val5"];

        $('#AddSectionButton').click(function () {
            var section = $('#editCatalogListItemHideMe').html();
            $(section).find('#numberLabel').text(counter);
            $(section).find('#contentLabel').text(content[counter % content.length]);

            $('div#editCatalogLeftBottomContent').append(section);

            counter++;

    });

This script appends empty div, without my values. How can i make this?

Answer 1

Use this:

var $section = $($('#editCatalogListItemHideMe').html());
$section.find('#numberLabel').text(counter);
$section.find('#contentLabel').text('text', content[counter % content.length]);
$('div#editCatalogLeftBottomContent').append($section);

In your current code, you’re defining section as a string. Then, at the lines following the section declaration, you’re wrapping the value in a JQuery object. This will modify the contents of the newly created object, but not the section variable.

I’ve adjusted your code, so that $section is a variable which refers to a newly created JQuery object. The lines after the declaration operate on the newly created object. At the end of the code, the HTML is appended.