Discover the simple way to insert a div within an href text using jQuery

Having issues validating my template on http://validator.w3.org. Any suggestions on how to rectify this using jquery?

<a href="/video/213123/"><img src="/media/videos/tmb/213123/1.jpg" title="Funny Videos" alt="Funny Videos" /><div class="Title_URL">Girls Funny Videos</div></a>

While validating my HTML page with http://validator.w3.org, it notifies me that the div Title_URL is not allowed there. However, I require it for my design. Is there a way to eliminate this error using jquery?

Answer №1

<a href="/video/213123/" id="href1"><img src="/media/videos/tmb/213123/1.jpg" title="Funny Videos" alt="Funny Videos" id="img1"/></a>

$('#img1').html = "<div class='Title_URL'>Girls Funny Videos</div>";

Check out the fiddle below to see this code in action!

http://jsfiddle.net/mastermindw/ASJW2/

The validator confirms that the code has Passed.

http://fiddle.jshell.net/mastermindw/ASJW2/show/

Validate the code yourself with the W3C Validator: http://validator.w3.org/check?uri=http%3A%2F%2Ffiddle.jshell.net%2Fmastermindw%2FASJW2%2Fshow%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Answer №2

My recommendation is to display it as a <span> rather than a <div> when generating the page's output. By doing so, it will undergo proper validation. Afterwards, you can utilize the code below in jQuery to carry out the replacement:

$( 'a span' ).each(function() {
    $( this ).replaceWith( $( '<div>' + this.innerHTML + '</div>' ) );
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to cleanly print HTML pages with the use of page breaks

Having trouble with creating a table and printing the data in a specific structure. The format should be: Title Data Sum The challenge is to ensure that the title does not end up at the bottom of the page, and the sum does not start at the top of the pag ...

Is there a way to translate this SQL Server script into MySQL while maintaining the same functionality?

https://i.sstatic.net/NfPLV.png I've been working with this script in SQL Server, but I'm struggling to apply the same logic in MySQL due to its different syntax. Any guidance or tips would be greatly appreciated. Thanks in advance! ...

Include a blank area on the right side and a duplicated image on the bottom right using Bootstrap

Let's set the scene: This screenshot showcases www.dreamstreetentertainment.com, a site that is still a work in progress but is already live. Don't inquire about it. The client insists on this setup. Essentially, I have an empty space to the rig ...

Adjusting Width with Javascript

My goal is to specify the width of a RadNumericTextBox that appears as an input element on the page using JavaScript. I have managed to set the width, however, the telerik controls come with built-in JavaScript functions that reset the input element' ...

What is the best way to specify attributes such as font size and padding for the mobile version in AMP for email?

I attempted to utilize media queries to create a responsive AMP email, but it seems that this feature is not supported in AMP. However, I discovered that you can define media="(max-width: 599px)" and media="(min-width: 600px)" for </amp-img>, but the ...

Ways to merge the concepts of "if" and "if not

I've written a function that needs to run only if a certain condition is not true: $(window).width() > 990) !$('body').hasClass("home") I attempted combining them like this: if( $(window).width() > 990) && !$('body&apo ...

What is the best way to position one of my links at the end of a bootstrap navbar?

insert image description here I'm currently working on implementing a Bootstrap navbar and I am trying to align one of the links, specifically the last one, to the right side. Although I have searched through the documentation, I have not been able t ...

How can you make an element appear when clicking and then disappear with a second click?

Having a bit of an issue here. When I click on the menu button "x," it triggers an onclick event that opens/displays an element. All good so far. But now, I want to click the same menu button "x" to close that same element, and that's where I'm s ...

Exploring the process of querying two tables simultaneously in MySQL using PHP

I currently have a search box in my PHP file that only searches from the "countries" table. However, I also have another table called "continent" and I would like the search box to retrieve results from both the "countries" and "continent" tables. Here is ...

Deactivate click events in the container div

Here is the html code snippet that I am working with: <div class="parent" ng-click="ParentClick()"> . . . <div class="child" ng-click="ChildClick()"> Some Text </div> </div> When clicking on Som ...

Tips for loading a repeater on a div scroll instead of relying on the browser window scroll

Currently, I have a repeater that loads records as I scroll down the main browser window. However, I am looking to enhance this functionality by adding a scrollable div and loading the repeater data as I scroll down that specific div, instead of the entire ...

The res.download() function in Express is failing to deliver the accurate URL to the client

When trying to utilize the res.download() method for downloading specific files from a server, there is an issue where triggering the res.download does not redirect the client to the correct URL. The files intended for download are located in a directory s ...

Tips on how to loop a song continuously in jPlayer's circular mode

Can you help me figure out how to make a song repeat in jPlayer circle? I have the code for autoplay, but I also want to add a repeat functionality. I tried adding options like repeat:, but it didn't work as expected. <script type="text/javascript ...

Manipulating browser geolocation with JavaScript

I am currently working on automating tests for a web application using Selenium. The application relies on obtaining the user's current location information through the HTML5 Geolocation API. However, for testing purposes, I need to simulate a fake lo ...

What is the best way to style my text fields in Django using Bootstrap?

In my form class, I have lines that look like this: class ReportForm(forms.ModelForm): diagnosis = forms.CharField(widget=forms.Textarea(attrs={'cols': 200, 'rows': 3})) class Meta: model = Report Then, when I render the form ...

SQL code to search for data matching certain criteria using the LIKE operator and restricting the results with

After completing my project in Yii, I am now looking to display values related to the items I am showcasing. I am interested in showing related recipes based on the cuisine and course fields from the recipe table. Below is the condition I have in mind. Ho ...

Position of background image

Attempting to incorporate an image within a textbox in the following format (## representing the image): --------------------- | ## | --------------------- My progress so far: input.loading { background: url(/images/loader.gif) no ...

Placing a hyperlink following the deletion of the last child element

In my scenario, I am trying to add a link to the last child of a specific class (('.' + change_class + ':last .adda .mediumCell:first')) after removing it. However, if the last child (44444444444444444444) is removed, the link is not ap ...

A guide on seamlessly incorporating FlotJs functionalities into a ReactJs application

Having trouble integrating Flot charts into React due to a '$.plot' is not a function error. Here's the code I'm using: Script tags Index.html <script src="dist/libs/js/jquery.min.js"></script> <script src="dist/libs/js ...

Update the content within a div based on the selected option from a dropdown menu or

Is there a way to change the displayed text based on user input or selected option? By default, the text shown is "Aa Bb Cc Dd Ee...", but it can be changed by selecting different options. If text is typed into the input field, the displayed text will up ...