Determine if a div contains an svg element with JavaScript

Question

Determine if a div contains an svg element with JavaScript

My question involves a div containing a question mark and some SVG elements. Here is the initial setup:

<div id="mydiv">?</div>

When validating a form submission in my code, I check if the div text contains a question mark like this:

const fieldText = $('#mydiv').text();
return fieldText.indexOf('?') !== -1;

Now, the content of the div includes an SVG question mark instead of just a plain text one:

<div id="mydiv">
  <svg version='1.1' id='Layer_1' class='q-mark-svg' xmlns='http://www.w3.org/2000/svg' ... >
    <!-- SVG path data here -->
  </svg>
</div>

I need to modify my JavaScript validation to now check for the presence of an SVG element within the div rather than just a question mark. How can I achieve this?

I attempted the following approach by searching for 'svg' in the div text, but it did not work as expected:

const fieldText = $('#mydiv').text();
return fieldText.indexOf('svg') !== -1;

javascript jquery html css svg

Answer 1

Answer №1

Instead of using jQuery, consider utilizing vanilla javascript and the getElementsByTagName method to retrieve a list of matching elements within specific containers. You can then check the length of the returned array (where 0 indicates false in the condition).

Here is an example: Conducting two tests, one involving an svg element inside a div, and one without:

var t1 = document.getElementById('test1');
var t2 = document.getElementById('test2');

// Implementing a basic conditional check
if (t1.getElementsByTagName('svg').length) {
  console.log('test1 contains svg');
}
if (t2.getElementsByTagName('svg').length) {
  console.log('test2 contains svg');
}

<div id='test1'></div>
<div id='test2'><svg></svg></div>

Answer 2

Instead of using jQuery, consider utilizing vanilla javascript and the getElementsByTagName method to retrieve a list of matching elements within specific containers. You can then check the length of the returned array (where 0 indicates false in the condition).

Here is an example: Conducting two tests, one involving an svg element inside a div, and one without:

var t1 = document.getElementById('test1');
var t2 = document.getElementById('test2');

// Implementing a basic conditional check
if (t1.getElementsByTagName('svg').length) {
  console.log('test1 contains svg');
}
if (t2.getElementsByTagName('svg').length) {
  console.log('test2 contains svg');
}

<div id='test1'></div>
<div id='test2'><svg></svg></div>

Answer 3

Answer №2

Give this a try $('#mydiv').find('svg').length)

When the svg is present, you will receive a value for the length. If not, the value will be 0.

I hope this information proves useful to you.

Answer 4

Give this a try $('#mydiv').find('svg').length)

When the svg is present, you will receive a value for the length. If not, the value will be 0.

I hope this information proves useful to you.

Answer 5

Answer №3

Locate the svg element within a div.

if($("#mydiv").find("svg").length) {
   alert("SVG element found");
} else {
    alert("No SVG element found");
}

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


<div id="mydiv">
   <svg version='1.1' id='Layer_1' class='q-mark-svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'
  viewBox='0 0 50 50' style='enable-background:new 0 0 50 50;' xml:space='preserve'>
  <style type='text/css'>
     .q-mark{fill:#777777;}
  </style>
  <g>
     <g>
        <path class='q-mark' d='M18.3,17.2c0,0.4-0.1,0.7-0.2,1c-0.1,0.3-0.3,0.6-0.5,0.8c-0.2,0.2-0.5,0.4-0.8,0.5c-0.3,0.1-0.6,0.2-1,0.2
           c-0.7,0-1.3-0.2-1.8-0.7c-0.5-0.5-0.7-1.1-0.7-1.8c0-1.6,0.3-3.2,0.9-4.6c0.6-1.4,1.5-2.7,2.6-3.8s2.3-1.9,3.8-2.5
           c1.4-0.6,3-0.9,4.6-0.9s3.1,0.3,4.6,1c1.4,0.6,2.7,1.5,3.8,2.6s1.9,2.3,2.6,3.8c0.6,1.4,0.9,2.9,0.9,4.5c0,3.2-1.2,6-3.5,8.4
           l-3.8,3.5c-1.3,1.3-2,2.7-2,4.3c0,0.7-0.2,1.3-0.7,1.8c-0.5,0.5-1.1,0.7-1.8,0.7s-1.3-0.2-1.8-0.7c-0.5-0.5-0.7-1.1-0.7-1.8
           c0-2.9,1.2-5.6,3.5-7.9l3.8-3.6c-...

Answer 6

Locate the svg element within a div.

if($("#mydiv").find("svg").length) {
   alert("SVG element found");
} else {
    alert("No SVG element found");
}

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


<div id="mydiv">
   <svg version='1.1' id='Layer_1' class='q-mark-svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'
  viewBox='0 0 50 50' style='enable-background:new 0 0 50 50;' xml:space='preserve'>
  <style type='text/css'>
     .q-mark{fill:#777777;}
  </style>
  <g>
     <g>
        <path class='q-mark' d='M18.3,17.2c0,0.4-0.1,0.7-0.2,1c-0.1,0.3-0.3,0.6-0.5,0.8c-0.2,0.2-0.5,0.4-0.8,0.5c-0.3,0.1-0.6,0.2-1,0.2
           c-0.7,0-1.3-0.2-1.8-0.7c-0.5-0.5-0.7-1.1-0.7-1.8c0-1.6,0.3-3.2,0.9-4.6c0.6-1.4,1.5-2.7,2.6-3.8s2.3-1.9,3.8-2.5
           c1.4-0.6,3-0.9,4.6-0.9s3.1,0.3,4.6,1c1.4,0.6,2.7,1.5,3.8,2.6s1.9,2.3,2.6,3.8c0.6,1.4,0.9,2.9,0.9,4.5c0,3.2-1.2,6-3.5,8.4
           l-3.8,3.5c-1.3,1.3-2,2.7-2,4.3c0,0.7-0.2,1.3-0.7,1.8c-0.5,0.5-1.1,0.7-1.8,0.7s-1.3-0.2-1.8-0.7c-0.5-0.5-0.7-1.1-0.7-1.8
           c0-2.9,1.2-5.6,3.5-7.9l3.8-3.6c-...

Answer 7

Answer №4

Give this a shot:

if($("svg")[0]){
    console.log("it's there!");
} else { 
    console.log("nowhere to be found");
}

Answer 8

Give this a shot:

if($("svg")[0]){
    console.log("it's there!");
} else { 
    console.log("nowhere to be found");
}

Answer 9

Answer №5

Try using either of the following codes to check for the existence of an SVG element within a div with ID "mydiv":

document.querySelector("#mydiv svg") !== null

or

document.querySelector("#mydiv svg").querySelector("svg") !== null

Answer 10

Try using either of the following codes to check for the existence of an SVG element within a div with ID "mydiv":

document.querySelector("#mydiv svg") !== null

or

document.querySelector("#mydiv svg").querySelector("svg") !== null

Determine if a div contains an svg element with JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

argument sent to component yields a result of undefined value

Font Awesome symbols using the class "fa-brands" are not functioning as expected

Employing JavaScript for fading divs in and out sequentially

Utilizing jquery and ajax to submit a form seamlessly without the need to refresh the web page

What is the best way to determine if a child component's property has changed within a method?

Change the name of "rows" in the findAndCountAll method of Sequelize

I cannot understand why I keep receiving <input type="email" value="required"> when all I want is <input type="email" value="" required>

Transfer Data from a Factory to a Controller in AngularJS

Stop the Router from Displaying the Page momentarily prior to Redirecting

Choose to either check or uncheck boxes using ReactJS

What is the best way to compare two date strings with the format dd/mm/yyyy using JavaScript?

Ways to avoid browser refresh when uploading files in React applications

How can you implement CSS styling for Next.js HTML during server-side rendering?

search a database field by querying HTML form input

Encountering a Next.js event type issue within an arrow function

Ways to stop Google Places API from generating outcomes from a particular country

Using JQuery to trigger CSS3 animations on one element when clicking on another

Steps to Create a Repeating Melody/Instructions for Implementing a Loop Function

get the value of the last selected element using jQuery

Overflow of Div Content