jQuery를 통해 일부 HTML에 이미지를 삽입하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/618851

  •  03-07-2019
  •  | 
  •  

문제

상황이 여기 있습니다. SO와 같은 표준 링크가 있습니다.

<h2><a href="#">Link Title</a></h2>

이제 배경을 삽입하여 버튼처럼 보이도록 배경을 삽입하고 싶습니다.

$(document).ready(function()
{
      $(".post a").wrapInner("<span></span>");
});

(링크의 HTML은 여기에서 찾을 수 있습니다. http://flickrental.co.uk/ - 그건 그렇고, 이것은 사이트가 아니라 링크의 코드 일뿐입니다)

이제 링크를 더 좋은 "버튼"으로 변환 할 수 있고 아주 행복합니다 ...하지만 또 다른 생각이있었습니다. 링크 내부에 작은 화살표 이미지를 추가 할 수 있다면 (이 사이트의 오른쪽) 제휴 사이트이고 버튼은 화살표 이미지뿐만 아니라 CTR을 증가시켜야합니다)

그러나 나는 이것을 할 올바른 구문을 찾을 수없는 것 같습니다.

어떤 아이디어?

도움이 되었습니까?

해결책

CSS와 함께 화살표를 추가해야 할 것입니다. 10 픽셀 너비의 화살표가 주어지면 :

.post a {
    padding-right: 10px;
    background: url(arrow.png) no-repeat right 50%;
}

그러나 이미 다른 것에 대한 배경 이미지를 사용하고 있다면 jQuery로 이미지를 추가 할 수 있습니다.

$("<img src='arrow.png'/>").prependTo(".post a");

귀하의 질문에서 HTML을 직접 변경할 수 없다고 가정합니다. 그렇지 않으면 아마도 그것이 최상의 솔루션 일 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top