CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
user3304303
user3304303

Reputation: 1041

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

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;

Upvotes: 3

Views: 6881

Answers (5)

Manoj Kadolkar
Manoj Kadolkar

Reputation: 716

you can try this :

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

Upvotes: 2

Robert Wade
Robert Wade

Reputation: 5003

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>

Upvotes: 7

4b0
4b0

Reputation: 22321

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>

Upvotes: 2

Jesin
Jesin

Reputation: 1029

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

Upvotes: 0

Shiladitya
Shiladitya

Reputation: 12161

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.

Upvotes: 2

Related Questions