Question

I have 2 rows, the first has all the text and the second will hold the footnotes and additional images.

In the text row i want to show a small image to alert the reader that there is a footnote.
I want to do this with jquery, i try to get the original position but it doesn’t work.
I think because i try to get the position of the class instant of the span.
But i don’t know how to get it of the span (with the class b_footnote!).

$('#container #book #column1 .b_footnote').each(function(){
    console.log($(this)); // goes good
    console.log($(this).position.left); // undefined
});

here’s some example html

<p>
en Benkei nog rust vonden. In een vertrek was Yoshitsune met zijn vrouw en jeugdig kind. De Dood stond in het vertrek gereed, en het was beter, dat de Dood zou komen op bevel van Yoshitsune, dan op bevel van den vijand buiten de deur. Zijn kind werd door een bediende gedood, en terwijl hij het hoofd van zijn geliefde vrouw onder den linkerarm nam, stootte hij zijn zwaard diep in haar nek. Na dit te hebben volbracht, pleegde Yoshitsune zelfmoord (hara-kiri).<span class="b_footnote">De buik opensnijden.</span> Benkei echter wachtte den vijand op. Hij stond met zijn groote beenen wijd uitgespreid, zijn rug tegen een rots gedrukt. Toen de dageraad aanbrak, stond hij nog altijd met uitgespreide beenen, terwijl zijn dapper lichaam door duizend pijlen was doorboord. Benkei was dood, maar vallen kon de krachtige held niet. De zon verrees over een man, die een ware held was, en die steeds getrouw was gebleven aan de eenmaal door hem uitgesproken woorden: “Waar mijn meester heengaat, hetzij ter overwinning, of in den dood, ik zal hem volgen.”</p>

I get it to the second row like this:
I don’t know if that will cause problems with showing the hint image on the original spot in the text.

.b_footnote {
    background: yellow;
    position: absolute;
    left: 540px;
    z-index: 99;
}

other solutions are welcome as well.

Answer 1

To get the CSS position as you defined, you should use

$(this).css('position');

To insert image after the span position, you can use jQuery’s .after()^[docs]

$("span").after('<img src="link/to/image.jpg" />'); //Select the span and insert the image