Variations between <div/> and <div></div>

When using Ajax to load two divs, I discovered an interesting difference in the way they are written. If I write them like this:

<div id="informCandidacyId"/>
<div id="idDivFiles"/>

Although both divs are being loaded, only one view is added to the DOM.

However, when I write the divs like this:

<div id="informCandidacyId"></div>
<div id="idDivFiles"></div>

Both load calls work perfectly and display the expected content.

So my question is, what exactly is the difference between closing the tag within the declaration versus using another tag?

javascriptjqueryhtml

Answer №1

One key distinction is that the <div> tag is not a self-closing element. Although certain browsers may still render your code properly, it will not be considered valid and is generally not recommended.

W3C Specification

Answer №2

As stated in the latest HTML specifications, the <div> element falls under the category of a standard element. Only elements like <br>, which are void elements, or elements from foreign namespaces (such as MathML and SVG) can contain a "/" character within their start tag.

Therefore, your code is deemed invalid, leading to discrepancies during the loading process.

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

Struggling to display AJAX GET results on my webpage, although they are visible in the Google Element Inspector

I'm working on a basic invoice page where I need to populate a dropdown box from my MySQL database. The issue I'm facing is that when I select an item, the description box doesn't get prepopulated as expected. I've checked in the networ ...

javascriptphpjquerymysqlajax

Show detailed information in a table cell containing various arrays using AngularJS

After integrating d3.js into my code, I now have an array with key-value pairs. Each team is assigned a key and its corresponding cost is the value. When I check the console log, it looks like this: Console.log for key and value Rate for current month [{ ...

javascriptangulartypescriptd3.js

Create a customizable Tree structure that includes checkboxes for each item and features drag

I am currently working on incorporating a Tree view with checkboxes and drag & drop functionality in Vue. However, I am unsure of where to begin. While I have successfully implemented checkboxes, I am struggling to figure out how to enable the feature whe ...

javascriptvue.jsvuejs2

I am facing an issue with file manipulation within a loop

I need to set up a folder with different files each time the script runs. The script should not run if the folder already exists. When I run the script, an asynchronous function is called and one part of this function causes an issue... This is my code : ...

javascriptnode.jsjsondiscord.js

Invoke a JSP page using JavaScript

Hello, I'm new to web development and I have a question about calling JSP from a JavaScript file. My project consists of an html file with JavaScript (home.html) and a JSP file (login.jsp). In the home.html file, there are 2 textboxes and 2 buttons - ...

javascriptjsp

Trigger file upload window to open upon clicking a div using jQuery

I utilize (CSS 2.1 and jQuery) to customize file inputs. Everything is working well up until now. Check out this example: File Input Demo If you are using Firefox, everything is functioning properly. However, with Chrome, there seems to be an issue se ...

javascriptjquerycssfile-upload

The findByIdAndUpdate() function lacks the ability to modify the collection

I'm encountering an issue when trying to update a product using mongodb and redux. It seems that the database is not reflecting the changes after I attempt to update the product. Can someone please assist me with this problem? Here is my product.js f ...

javascriptnode.jsreactjsexpressmongoose

Is there a way to adjust my input value to correspond to December of 2022?

I am working on a project where I need to set a default month and year that the user cannot modify. They should only be able to change the date in December months. Any tips on how I can achieve this? <input id="input_date" type="date&qu ...

htmlcss

Attempted to identify whether an item exists in an array, and if it does, then add the item to the array; if not, then perform

Allow me to make some clarifications as it might be a bit confusing initially. This project I'm working on is for school. I don't expect anyone to do it for me, but I need help with a specific part. I'm creating a simple shopping cart using ...

javascriptarraysvue.js

The functionality to generate forms on the click of a button appears to be malfunctioning

I am currently attempting to dynamically create Bootstrap Panels using an `onclick` function. However, I want each Panel to generate multiple forms when the button is clicked. In my current code, the first Panel successfully creates forms when the button i ...

javascriptjquerytwitter-bootstrap

What is the method for setting a condition within the setState function?

I used if for the title: in SetConfirmDialog, but it's not working. How can I fix this? <Button color={user.active ? "success" : "error"} variant="text" startIcon={<UserCheck />} title={user.active ? &quo ...

javascriptreactjsmaterial-ui

Guide to Embedding an Image in a List in HTML

How do I resize an image according to the size specified in CSS, and ensure that it fits within a list of items where each item consists of both an image and a name? Currently, my code only displays the image in its original size. for(var i =0; i< o ...

javascripthtmlcss

Arranging various JavaScript arrays

I've been working on a script using the Haversine formula, but I'm running into an issue where it always directs me to the first location in the array, no matter how many times I switch them around. Any suggestions? var locations = new Array( ...

javascriptarrayshtmlgeolocationhaversine

The navigation in Framework 7 is causing issues with the on-click functionality

Utilizing the framework's built-in formToJSON() function, I have been able to retrieve form values. By utilizing a click event, I am able to log the values. $$("#query-submit").on("click", function () { var queryForm = app.formToJSON("#query-form ...

javascriptajaxperformancehtml-framework-7

Exploring Nashorn's Global Object Variables Through Access and Intercept Techniques

I recently came across a question called "Capturing Nashorn's Global Variables" that got me thinking. I'm facing limitations when it comes to capturing the assignment of variables to the global object. For example, let's say I evaluate the ...

javascriptjavanashorn

Using JQuery, a button is programmed to take a URL and then proceed to submit

My application is designed to shorten URLs for users who are authenticated. The form only requires the full URL input, and it will then generate a shortened version of the link. I am interested in creating a button that can be embedded on pages with long, ...

javascriptphpjqueryajaxforms

Error encountered when URLSearchParams attempts to add an array

Hi, I'm encountering a problem when attempting to send an array using URLSearchParams. Here is the code snippet in question: const worker = async(endpoint, method, parameters) => { let body; if (typeof parameters === 'object' &am ...

javascriptexpressurlsearchparams

Is it possible to display a title tooltip only when the CSS ellipsis feature is active in a React component?

Issue: I am trying to find a neat solution to display a title tooltip on items that have a CSS ellipsis applied, within a React component. Approaches Attempted: I created a ref, but it only exists after componentDidUpdate. Therefore, I force an update w ...

javascriptreactjs

Issue with custom video plugin functionality on Internet Explorer browser

I designed a custom video plugin that allows me to use shortcodes for videos with a unique format. I implemented a code snippet from jsfiddle to create a prominent play button, which functions smoothly across all browsers except for Internet Explorer. Desp ...

javascriptjquerywordpressinternet-explorerplugins

Using inline CSS to apply conditional styles to a component in React is a great way to customize the

I'm currently working on customizing the styles of some buttons depending on their 'active' status and whether the user is hovering over them. So far, it's partially working but I'm encountering behavior that I can't fully com ...

javascriptcssreactjsmaterial-ui