test involving jQuery and append()

[Bundy2]

Hi all,
Thinking out loud...
I want to test if a certain element, one <p> amongst many, is on view and in a certain state. Let's call it <p id="test">.
Prior to this test, "p#test" may have undergone two changes.

It may have been set to "display:none", in which case we're testing for "display:none" being false:

if ( ($('p#test').css('opacity') !== 0) ) 

Then the hard part: "p#test" may also have been modified with jQuery .append():

 $('p#test').append('<span class="add"> yes</span>'); 

How to test whether, as a second condition, "yes" has been added to "p#test" ? maybe

 if ( ($(p#test).css('opacity') !== 0) && ($('p#test span').hasClass('add')) ){ do something } 

?

This looks ok, but will be difficult to confirm by testing as there is only one situation among hundreds.
Also, It would be logically better to test if there actually is a span, but I can't see how to do this.
Any comments will help.
cheers

[NickMNS]

It would be logically better to test if there actually is a span

That is correct. The simplest way to do that, is to forget about jQuery and just use plain vanilla JS

const spanElem = document.querySelector('#test span') 
if (spanElem) { //do something }

//if you are coding using ES5 (eg for older browsers use var instead of const)

[Bundy2]

NickMNS, Many thanks!

[robzilla]

Opacity and display are different CSS attributes. If it's "display: none" you're after, why test for opacity?

[Bundy2]

Correct, it should be if ( ($('p#test').css('display') !== 0) ).
(There are other cases where a <p> has been modified using opacity, fadeTo(); my confusion...)

[jpmmedia]

just use
console.log($('p#test').css('display')); to see the value set for display

then for example,

if ($('p#test').css('display') !== 'block')

Says if the document element of p with a id of test does not have the style of display block do something