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

Connect a controller in AngularJS to a service property

Is it possible to protect assets aside from JavaScript in Nodewebkit?

There are no specified operations outlined in the Node.js Express documentation

Header Menu Click Causes Blurring of Website Background

How to Filter, Sort, and Display Distinct Records in an HTML Table with jQuery, JavaScript, and

Serialize a web form to transmit it through Ajax requests

Directly within Angular, map the JSON data to an object for easy assignment

Tips for compressing JavaScript on the fly

Guide to integrating custom fields in Wordpress with mapbox-gl js to generate map markers

What is the best way to extract the chosen value from a dropdown menu within the $_POST array?

Combine the arrays to utilize ng-repeat

Issues with dynamically adding or removing scroll in jQuery are not being resolved

What is the best way to navigate back to the top of the page once a link has been clicked?

What is the best way to pass a value to a PHP file and then redirect to it?

Tips for implementing the f11 effect with a delay of 5 seconds after pressing a key in JavaScript or jQuery

The Kendu UI Tabsbstrip views are experiencing issues with loading jquery validation

What are the steps to create parallel curves in three.js for road markings?

Identifying and handling the removal of a complete div element by the user

Are you looking to work with an ASMX web service and navigate JSON utilizing JavaScript or

Issue encountered while utilizing property dependent on ViewChildren