I am moderately certain the answer has already been answered, my issue is I don't know what to even ask.

I am trying to dynamicly add already existing HTML divs by cloning them and changing the values, and I ran into an issue

HMTL :

    <div class="worldRow">
        <div class="worldProperties">Name</div>
        <div class="worldProperties worldName">World name</div>
        <div class="worldProperties">Population</div>
        <div class="worldProperties worldPopulation">50</div>
        <div class="worldProperties">Occupency</div>
        <div class="worldProperties worldOccupency">45%</div>
    </div>

Javascript :

function addWorld(data){
    var row = $('#fakeWorldList .worldRow').clone();
    row = $(row).attr('id',data.worldId);
    $(row).('.worldName').value('this will never work, halp.');
}

In my javascript, on the last row of my function, I am trying to set the div with the class "worldName" a new value, but I simply cannot figure how.

If anyone could point me in the right direction, it would be much appreciated.

Cheers

I am moderately certain the answer has already been answered, my issue is I don't know what to even ask.

I am trying to dynamicly add already existing HTML divs by cloning them and changing the values, and I ran into an issue

HMTL :

    <div class="worldRow">
        <div class="worldProperties">Name</div>
        <div class="worldProperties worldName">World name</div>
        <div class="worldProperties">Population</div>
        <div class="worldProperties worldPopulation">50</div>
        <div class="worldProperties">Occupency</div>
        <div class="worldProperties worldOccupency">45%</div>
    </div>

Javascript :

function addWorld(data){
    var row = $('#fakeWorldList .worldRow').clone();
    row = $(row).attr('id',data.worldId);
    $(row).('.worldName').value('this will never work, halp.');
}

In my javascript, on the last row of my function, I am trying to set the div with the class "worldName" a new value, but I simply cannot figure how.

If anyone could point me in the right direction, it would be much appreciated.

Cheers

• javascript
• jquery

• 1 try $(row).find('.worldName').html('this will never work, halp.'); – Dipesh Parmar Commented May 1, 2013 at 3:56

2 Answers 2

You need to use .find() to search for a child element

$(row).find('.worldName').text('this will never work, halp.');

Ex:

function addWorld(data){
    var row = $('#fakeWorldList .worldRow:first').clone();
    row = $(row).attr('id',data.worldId);
    $(row).find('.worldName').text('this will never work, halp.');
}

.value is for input elements, you need to do

$(row).find('.worldName').html('this will never work, halp.');