Append List values using JQuery

Question

using JQuery append how to push list values to another div section on button click

For example:

I have two list values

1.Adam  

2.Lance

if i click on add button the Adam value should be added to another div section same for lance.. etc

https://jsfiddle.net/oa2hfLum/3/

help me out in achieving it Thanks!

html

<div>
<ol id="sortable">

</ol>
</div>

<div>
        <ul id="draggable">
            <li>
                <div>
                    <label class='lbl'>
                        Lance
                    </label>
                    <button>Add To Top container</button>
                </div>
            </li>
            <li>
                <div>
                    <label class='lbl'>
                        Adam
                    </label>
                    <button>Add To Top container</button>
                </div>
            </li>

        </ul>
    </div>

JQuery

$(document).ready(function() {
    $("button").click(function () {
        $("#sortable").append('<li></li>');
    });
});

Artur Filipiak · Accepted Answer · 2015-10-04 10:03:32Z

1

You can get the label text using .prev() and .text()

$("button").click(function () {
    var label = $(this).prev().text();
    $("#sortable").append('<li>'+label+'</li>');
});

JSFiddle demo

answered Oct 4, 2015 at 10:03

Artur Filipiak

9,1874 gold badges33 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sinisake · Accepted Answer · 2015-10-04 10:03:20Z

1

I think that you could use this:

$(document).ready(function() {
    $("button").click(function () {
        $("#sortable").append('<li>'+$(this).prev('label').text()+'</li>');
    });
});

Demo: https://jsfiddle.net/oa2hfLum/4/

answered Oct 4, 2015 at 10:03

sinisake

11.3k2 gold badges21 silver badges29 bronze badges

1 Comment

Sjay Over a year ago

Thank you so much for your valuable time and for solving my issue Thanks!

calinaadi · Accepted Answer · 2015-10-04 10:03:53Z

1

Change

$("#sortable").append('<li></li>');

to

$("#sortable").append('<li>'+$(this).parent().find('label').html()+'</li>');

answered Oct 4, 2015 at 10:03

calinaadi

1,4661 gold badge13 silver badges22 bronze badges

Collectives™ on Stack Overflow

Append List values using JQuery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related