Dodanie obrazka do buttona przy użyciu jQuery

Jeśli w kodzie mam:

.append($('<button>')

To jak do tego buttona dodać obrazek?

Zamiast buttona, możesz dać znacznik input, który będzie działał jak button

<input type="image" src="http://example.com/path/to/image.png" />

albo dajesz obrazek do CSS i modyfikujesz znacznik button:

<button style="background: url(image.png)" ... />

Staraj sie unikac inline stylow. Aby zachowac porzadek (umownie).

$('div').append('<button class="btn-img">BUTTON</button>');
//w css
.btn-img {
  background: url("http://linkdoobrazka.pl");
}

Ale to będzie traktowane jako tło buttona, a ja chcę to dodać tak aby wyświetlane było obok napisy który jest na buttonie.

No to sprobuj z:
.append('<button>NAPIS <img src="link do obrazka z ftp" /></button>');

lub href=""jako link http://

Ale jak mam taki kod:

.append($('<button>')

to jak dodać obrazek?

Bo wy odpowiedzi podajecie w innym kodzie:

.append('<button>NAPIS <img src="link do obrazka z ftp" /></button>');

Taki kod nie za wiele mówi. Podaj większą cześć kodu. Bo to aktualnie mi mówi Nic. A nic mi powiedziało, ze mozesz to dodać tak jak Ci napisałem.

Albo rozwiń i dodaj wiecej kodu, ktory tam masz albo zastosuj to co Ci podałem.

for (var i in data) {
                if (data.hasOwnProperty(i)) {
                    $('#tableResults tbody').append(
                        "<tr>" +
                        "<td class='nameCompany'>" +
                        data[i].CompanyName +
                        "<br /><button class='showOnMap' onclick='showOnMap(data[i].Id)'>" +
                        "POKAŻ NA MAPIE" +
                        "</button class='showOnMap'></td>" +
                        "</td>" +
                        "<td class='address'>" +
                        data[i].CompanyAddress +
                        "</td>" +
                        "<td class='phoneNumber'>" +
                        "tel. " + data[i].PhoneNumber +
                        "</td>" +
                        "<td class='installationPrice'>" +
                        data[i].PriceInstallation +
                        "</td>" +
                        "</tr>");
                }

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .addClass('nameCompany')
            .append(data[i].CompanyName)
            .append($('<br>'))
            .append($('<button>')
                .addClass('showOnMap')
                .click(e => showOnMap(data[i].Id))
                .html('POKAŻ NA MAPIE')
            )
        )
        .append($('<td>')
            .addClass('address')
            .append(data[i].CompanyAddress)
        )
        .append($('<td>')
            .addClass('phoneNumber')
            .append(data[i].PhoneNumber)
        )
        .append($('<td>')
            .addClass('installationPrice')
            .append(data[i].PriceInstallation)
        )
    );

Jak do tego dodać obrazek:?

.append($('<button>')

po .html() dodaj .append('<img src="link do obrazka z ftp"/>')

ewentualnie zam8ast src mozesz dac href="http://linidoobrazka.pl/obrazek.jpg"

Ok, dzięki działa jak dodam po htmlu. Czemu jednak nie działa gdy to dodaje:?

.append('<img src="link do obrazka z ftp"/>')

Miało być nie działa jak dodam przed .html*.

Poniewaz html to tekst a ty chciałes dodać obrazek obok tekstu. jesli chcesz dodac przed napisem to bedzie mniej wiecej .html('<img src='..."/> TEKST')

A gdy didajesz .append przed Html to zostaje ten obrazek podmieniony przez tekst z .html

append dodaje w twoim przypadku obrazek przed tekst a jesli uzyjesz appendTo to powonien dodać po tekscie ewentualnie dodaj do htmk ten img

Ok dzięki wielkie działa, a jak chcę jeszcze np dodać jakiś odnośnik a href to też w tym htmlu dokleić?

Możesz ale ty chcesz dac link do buttona tak? to wtedy daj po html albo appned .attr('href', 'http://linkdostrony.pl')

ponjewaz gdy dasz ten tag a tylko i wylacznie na napis a on nie jest np. wystilizowany (zajmuje pelna powoezchnie przycisku to bedzie tylko tekst klikalny i gdy klikniesz na button obok tekstu to nic sie nie stanie. Wiec zaleca się albo wystylizowac a i dostosowac do obszaru przycisku albo naloz link na przycisk.

dodałem po html:

.attr('href', 'https://www.w3schools.com')

Ale niestety nie działa.

.html('<img src="zrodlo"/> Tekst<')
 .attr('href', 'https://www.w3schools.com')

W ten sposób nie dodaje mi się link do buttona.

Po "Tekst" nie powinno byc "<". Dodaj na początku zaraz po button. Jak nie zadziała to zmień button na a, jak nie to dodaj a do html

Usunąłem po tekst "<", i po button przed htmlem dodałem coś takiego:

.append($('<a>')
.attr('href', 'https://www.w3schools.com')

ale nadal nie działa ten a href.

Tak to wygląda, tylko w sumie nie mam buttona, ale element p, ale to chyba nic nie zmienia:

.append($('<p>')
.append($('<a>')
.attr('href', 'https://www.w3schools.com'))
.html('<img src="zrodlo"/> Tekst')

Po .attr zamknales nawias dwa razy. usun jeden nawias w miejscu .attr('href', 'https://www.w3schools.com')

I jesli to nic nie da.... poniewaz element jest dodawany. gdybys np. dodal $('<a class="link">')i po calym kodzie dal $('.link').attr('href', 'http://link.pl'); to wowczys zadziala.
Jesli chcesz jednak wszystko w tej pentli to do <a> dodaj href="...". Wiadomo usun ten attr.

Tam jest drugi nawias bo on zamyka ten nawias otwierający w elemencie a:

append($('<a>')

ten pierwszy nawias domyka.

ahh czyli ty chcesz do button dodac ten . Myslalem, ze link chcesz dodac do buttona wiec waystarczylo dodac .attr po .($('<button>'))

To teraz mam taki kod, w którym nadal nie działa href:

.append($('<p>')
.attr('href', 'https://www.w3schools.com')
.html('<img src="../Content/images/AntennaFitters/error_icon.png"/>'Tekst')

Chcę aby cały element p działał jak a href.

p to jest paragraf wiec nie jest to odnosnik. Musialbys ten

zamienic na a.

.apend($('<a href="https://www.w3schools.com">')
.html('<img src="../Content/images/AntennaFitters/error_icon.png"/> Tekst')

Chcę żeby w tym elemencie p był zawart a href.

Po pierwsze "chcialbym". No to trzeba pokombinowac:

.append($('<p>')
.html('<a href="https://www.w3schools.com"><img src="../Content/images/AntennaFitters/error_icon.png"/>'Tekst</a>')