Добавить изображение для отправки ввода с помощью Jquery

Question

Привет, у меня есть следующий код

<input type="submit" name="btnCheckOut" value="Buy >>" id="btnCheckOut" />

У меня нет прямого доступа к исходному коду, но я хотел бы добавить изображение "money.png" вперед "Купить" текст.

Как можно это сделать с Jquery?

Answer 1

Вы можете сделать это с помощью CSS, добавив фоновое изображение к элементу submit.

submit {

    background: url('/myimage.png') no-repeat top left;
    padding: 2px 8px;
}

Answer 2

Решение Аарона Хурана, но в JQuery:

$(this).css('background', "url('/myimage.png') no-repeat top left").css('padding', '2px 8px');

Answer 3

Под "спереди" вы имеете в виду перед <input/> или перед фактическим текстом (то есть внутри ввода)?

Если это первое, то это должно сделать:

$('input[name=btnCheckOut]').before('<img src="money.png"/>');

Если это последнее, то вместо этого следует использовать <button>, поскольку оно допускает практически любые элементы в нем:

$('input[name=btnCheckOut]').before(
    '<button name="btnCheckOut"><img src="money.png"/>Buy &gt;&gt;</button>'
).remove();

Answer 4

Используйте перед (), чтобы вставить изображение перед тегом ввода.

http://api.jquery.com/before/

$('#btnCheckOut').before('<img src="money.png" id="..." />');

PS Если вы хотите, чтобы изображение также было кликабельным, вы должны управлять им также с помощью jQuery, связывая событие click.