Incorporating an image prior to the "contains" term with the help of JavaScript

Question

Incorporating an image prior to the "contains" term with the help of JavaScript

Seeking assistance with the code snippet below without altering the text targeted in my "a:contains" statement. The challenge lies in determining the appropriate placement of ::before in the script provided.

Link: https://jsfiddle.net/onw7aqem/

$(document).ready(function() {
  $("a:contains(This is the text)").css("content", "url('https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U')");
});

<a href="#">This is the text</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

javascript html jquery css ajax

Answer 1

Answer №1

Take a look at the code snippet below.

$(function() {
  $("<div>").css("content", "url('https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U')").appendTo($("a:contains(This is the text)"));
});

<a href="#">This is the text</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

This code snippet creates a new <div> element and adds it to the existing <a> element.

Answer 2

Take a look at the code snippet below.

$(function() {
  $("<div>").css("content", "url('https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U')").appendTo($("a:contains(This is the text)"));
});

<a href="#">This is the text</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

This code snippet creates a new <div> element and adds it to the existing <a> element.

Incorporating an image prior to the "contains" term with the help of JavaScript

Answer №1

Similar questions

Utilizing Highcharts for Dynamic Data Loading via AJAX

Sort through the array using a separate array in Vuejs

What is the best way to track and document the specific Context Provider being utilized while invoking useContext?

The Challenge of Implementing Jquery in Internet Explorer

Click to save image using jQuery

Is Material-ui's sx feature able to produce optimized utility classes like tailwindcss?

Use the onclick event to submit a form, ensuring that it can only be submitted once

PHP code to paginate and format content for Point of Sale printers

Error: Module 'config' not found by Jest

Use Vue.js class bindings to create blank spaces in between CSS classes

Passing a Scope to ES6 Template Literals: How to Ensure they are Interpreted Correctly?

What is the best way to maintain an active listGroup even after reloading the page?

Devbridge AutoComplete leveraging Ajax fails to populate suggested options

MUI AutoComplete does not currently support the type number with maxLength restriction. What steps can be taken to resolve this issue?

Unfortunately, Safari and iOS do not support the video functionality

Fade in and out MaterialUI text using useEffect in combination with setInterval

Error in AngularJS when attempting to use an expression as a parameter for a function, resulting in a syntax parse

What should a Laravel controller return in response to an ajax request?

Problem with Raphael Sketch and Request to Ajax

Enhancing the responsiveness of images compared to regular images by resizing and locking them in place