How to check if a div has an svg in it using JavaScript?

user_3304303 0
Viewed 4841

I have a div like the following with a question mark in it...

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

In my code, when someone tries to submit a form, I do a check to see if that field has a question mark in it, like this:

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

That works fine, but now, instead of a question mark in that div, I have an SVG of a question mark (rather than just a text question mark), like this.

<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.6c1.3-1.4,2-2.9,2-4.8c0-0.9-0.2-1.8-0.5-2.6c-0.4-0.8-0.8-1.5-1.5-2.1c-0.6-0.6-1.3-1.1-2.1-1.5 c-0.8-0.4-1.7-0.5-2.6-0.5c-0.9,0-1.8,0.2-2.6,0.5c-0.8,0.4-1.5,0.8-2.1,1.4c-0.6,0.6-1.1,1.3-1.4,2.1 C18.5,15.3,18.3,16.2,18.3,17.2z M28.5,40.9c0,1-0.3,1.8-1,2.5c-0.7,0.7-1.5,1-2.5,1c-1,0-1.8-0.3-2.5-1c-0.7-0.7-1-1.5-1-2.5 c0-1,0.3-1.8,1-2.5c0.7-0.7,1.5-1,2.5-1c1,0,1.8,0.3,2.5,1C28.2,39.1,28.5,40,28.5,40.9z'/>
      </g>
    </g>
  </svg>
</div>

I still want to run a check on that div, but now I have to check to see if it has an SVG in it, rather than just "?". How can I use JS to check if a div has an svg element in it?

FYI, I tried the following since I thought it would still look for the text, but to no avail...

const fieldText = $('#mydiv').text();
return fieldText.indexOf('svg') !== -1;
svg css html jquery javascript
5 Answers

jQuery is overkill here. You can use vanilla javascript and getElementsByTagName to return an array of matching elements inside specific elements. Then you can test against the length of the returned array (0 serving as false in the condition).

For example Two tests, one with svg in a div, and one without:

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

// Used in a simple conditional statement
if (t1.getElementsByTagName('svg').length) {
  console.log('test1 has svg');
}
if (t2.getElementsByTagName('svg').length) {
  console.log('test2 has svg');
}
<div id='test1'></div>
<div id='test2'><svg></svg></div>

user_40319530

Try this out $('#mydiv').find('svg').length)

If svg exists then you will get length as some value, if not then value will be 0.

Hopw this will help you.

user_70790250

Find svg tag inside div. 

if($("#mydiv").find("svg").length) {
   alert("I found SVG");
} else {
    alert("SVG is not 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.6c1.3-1.4,2-2.9,2-4.8c0-0.9-0.2-1.8-0.5-2.6c-0.4-0.8-0.8-1.5-1.5-2.1c-0.6-0.6-1.3-1.1-2.1-1.5
           c-0.8-0.4-1.7-0.5-2.6-0.5c-0.9,0-1.8,0.2-2.6,0.5c-0.8,0.4-1.5,0.8-2.1,1.4c-0.6,0.6-1.1,1.3-1.4,2.1
           C18.5,15.3,18.3,16.2,18.3,17.2z M28.5,40.9c0,1-0.3,1.8-1,2.5c-0.7,0.7-1.5,1-2.5,1c-1,0-1.8-0.3-2.5-1c-0.7-0.7-1-1.5-1-2.5
           c0-1,0.3-1.8,1-2.5c0.7-0.7,1.5-1,2.5-1c1,0,1.8,0.3,2.5,1C28.2,39.1,28.5,40,28.5,40.9z'/>
     </g>
  </g>
   </svg>
</div>

user_9651460

you can try this :

if($("svg")[0]){
    console.log("present");
} else { 
    console.log("absent");
}
user_53128980

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

user_22725060
Related