If element exists then add new div

Question

I have been reading everywhere for a solution and I have tried all of them. But I am getting and error with this snippet:

if (jQuery('.page-id-5356 .uts-main-login')[0]){
  jQuery('.entry-content #em-wrapper').add('<div class="uts-login">text</div>');
}

Any ideas on why this isn't working? I either get nothing, a length of 2 or a geryed out undefined. No new div is created or anything. Basically, I want a a button to appear when on one page when .uts-main-login is visible. It's killing me! Been at it for hours :(

Possible duplicate of [Append div to end of document with jQuery?](https://stackoverflow.com/questions/6650963/append-div-to-end-of-document-with-jquery) — Zze, Mar 08 '18 at 04:24

score 1 · Answer 1 · edited Mar 08 '18 at 04:31

1

Use like below

if (jQuery('.page-id-5356 .uts-main-login').length){
 jQuery('.entry-content #em-wrapper').append('<div class="uts-login">text</div>');
}

edited Mar 08 '18 at 04:31

Zze

18,229
13
85
118

answered Mar 08 '18 at 04:15

fayis003

680
4
10

score 1 · Answer 2 · answered Mar 08 '18 at 04:18

Use append

if (jQuery('.page-id-5356 .uts-main-login')[0]){
  jQuery('.entry-content #em-wrapper').append('<div class="uts-login">text</div>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='page-id-5356'>
<div class='uts-main-login'></div>
</div>
<div class='entry-content'>
<div id='em-wrapper'></div>
</div>

score 0 · Accepted Answer · answered Mar 08 '18 at 04:18

if(jQuery('.page-id-5356 .uts-main-login').is(":visible")) {
    jQuery('#em-wrapper').append('<div class="uts-login">text</div>');
}

You can use is(':visible') to check whether the element is visible or not.
If you have the id of the element no need to use class name before it.
Use append() to add the element

If element exists then add new div

3 Answers3