CODEWITHSUNDEEP
javascriptjqueryappendattr
willking
willking

Reputation: 155

Append two tags to the same row using jQuery

How do I append two tags to the same row? Current this is only creating a td tag not putting the a tag inside of it. This is the desired result.

Desired:

<td class="link-text"><a href="#">Click Here</a></td>

Current code:

var newRow = $('<tr>').attr('id', keyID);
        newRow.append($('<td class="link-text">').text(artist_name));
        newRow.append($('<td><a class="link-text" style="padding:5px;" target="_blank">').attr("href", link).text(link));
        newRow.append($('<td class="link-text">').text(email));

Upvotes: 2

Views: 961

Answers (3)

Ananth Cool
Ananth Cool

Reputation: 135

Check this out

$(document).ready(function(){
            $("table tbody tr:first").append('<td class="link-text"><a href="#">Click Here</a></td>');
        });

Upvotes: 0

RAUSHAN KUMAR
RAUSHAN KUMAR

Reputation: 6006

you are adding href attribute to the td element not the a element, so first create a td element then add a element inside this and then add the td to to tr element. use like this

var newRow = $('<tr>').attr('id', keyID);
newRow.append($('<td class="link-text">').text(artist_name));
var newTd = $('<td class="link-text">');
newTd.append($('<a style="padding:5px;" target="_blank"></a>').attr("href", link).text('Click Here'));
newRow.append(newTd);
newRow.append($('<td class="link-text">').text(email));
$('table tbody').append(newRow);

Upvotes: 0

JV Lobo
JV Lobo

Reputation: 6316

To get your desired result:

<td class="link-text><a href="#">Click Here</a></td>

You can do something like this:

First create your td, then append your a to that td, and then append that td to your tr

var newRow = $('<tr>').attr('id', 51);

var newTd = $('<td class="link-text">');

newTd.append($('<a style="padding:5px;" target="_blank"></a>').attr("href", 'google.com').text('Click here'));

newRow.append(newTd);
        
$('.container').append(newRow);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container"></div>

Upvotes: 1

Related Questions