CODEWITHSUNDEEP
jqueryhtmlcssappend
Christoph
Christoph

Reputation: 133

jQuery .append() only on first element

<div class="append-something first"></div>
<div class="append-something second"></div>
<div class="append-something third"></div>

$("#trigger").click(function() {
 $(".append-something").append("Some Stuff");
});

Hi there, i want the above code to paste/append the words "Some Stuff" into the div-class "append-something" but only into the first div with the class-name. (In my code the words should append to "first", not to "second" or "third"). Thanks a lot!

Upvotes: 2

Views: 10996

Answers (7)

Mitchel Vreman
Mitchel Vreman

Reputation: 128

You can use the :first or the :first-child selector. For only the last you should use the :last selector.

For any other element you can use the index of the element. jQuery will create an array of all the elements he finds with append-something class. So the first element will be index of 0. 

$("#trigger-first").click(function() {
// ":first" and ":first-child" will work.
    $(".append-something:first").append("Some Stuff");
});

$("#trigger-last").click(function() {
// ":last" for last option.
    $(".append-something:last").append("Some Stuff");
});

$("#trigger-second").click(function() {
// It will return an array of item so you can request on index.
    $($(".append-something")[1]).append("Some Stuff");
});

To play with it: https://jsfiddle.net/9bfskesb/

Upvotes: 9

Kisan Katekar
Kisan Katekar

Reputation: 11

$(".append-something").first().append("Some Stuff");

Upvotes: 0

RAUSHAN KUMAR
RAUSHAN KUMAR

Reputation: 6006

you have already three different classes for each div i.e first, second, third. You can use the classes specifically to append the html as

 $(".first").append("Some Stuff");

But if you want to add using the same class for each div the you should go with

 $(".append-something:first").append("Some Stuff");

Upvotes: 0

XYZ
XYZ

Reputation: 4480

Use $(".append-something:first").append("Some Stuff"); or if you have the class .first then simply $(".append-something.first").append("Some Stuff");

$("#trigger").click(function() {
 $(".append-something.first").append("Some Stuff");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="append-something first"></div>
<div class="append-something second"></div>
<div class="append-something third"></div>

<button id="trigger">click</button>

$("#trigger").click(function() {
     $(".append-something:first").append("Some Stuff");
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="append-something first"></div>
<div class="append-something second"></div>
<div class="append-something third"></div>

<button id="trigger">click</button>

Upvotes: 1

Dhruvang Gajjar
Dhruvang Gajjar

Reputation: 598

You Can use prependTo() method 


$("<span>Hello World!</span>").prependTo(".inner:first-child");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

Upvotes: 1

Super User
Super User

Reputation: 9642

You can use :first selector for this

$("#trigger").click(function() {
 $(".append-something:first").append("Some Stuff");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="append-something"></div>
<div class="append-something"></div>
<div class="append-something"></div>

<button id="trigger">click</button>

Upvotes: 0

Mathiasfc
Mathiasfc

Reputation: 1697

You can use the first selector:

 $(".append-something:first").append("Some Stuff");

Upvotes: 2

Related Questions