jQuery appends only if the div isn't empty

jquery appendto not working
jquery append multiple elements
jquery remove element
jquery check if div contains iframe
jquery check if element exists
jquery append to head
jquery check if element append
jquery check if child exists

I have a div element and I want to append an icon to it on hover but jQuery appends the icon only if the div isn't empty else nothing happens.

$('div #tags').hover(function() {
  $(this).append('<p>+</p>')
}, function() {
  $(this).find("p").last().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tags">
  <p>The div isn't empty</p>
</div>

Since the div and the id refers to the same element, you should not have any space in the selector in between them.

Please Note: Since the id attribute is unique in a document, simply $('#tags') is safe enough to target the element.

$('#tags').hover(function() {
  $(this).append('<i class="fa fa-plus-circle ml-1 add-tag-icon"></i>')
}, function() {
  $(this).find("i").last().remove();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tags">
    <p>The div isn't empty</p>
</div>

About jQuery append() and how to check if an element has been , You are using mootools and not jQuery. To check if your element exists. if($('#​other').length > 0). So if you do not want to append the element  Since .append() can accept any number of additional arguments, the same result can be achieved by passing in the three <div>s as three separate arguments, like so: $('body').append( $newdiv1, newdiv2, existingdiv1 ). The type and number of arguments will largely depend on how you collect the elements in your code.

$('div #tags') is a wrong selecting for your <div> in your case. What you did means that jQuery is looking for an element with the id of #tags inside the <div>. Instead, you need to make it $('#tags').

.appendTo(), Description: Insert every element in the set of matched elements to the end of the target. A selector, element, HTML string, array of elements, or jQuery object; the Using jQuery methods on SVG documents, unless explicitly documented for  Not only a beautiful way, but innerHTML will rebuild the DOM, and that is just not a good solution. Use appendChild(). just download the jQuery file add jQuery

Height & width of <div> & <p> elements are by default 0, hence your hover effect wouldn't produce(you cannot hover on element):

<div id="tags"><p></p></div>

If you write some text inside element then width and height will change & you will able to produce hover effect:

<div id="tags"><p>Not empty</p></div>

Therefore <i> doesn't append if div or p elements are empty

.append(), DOM element, text node, array of elements and text nodes, HTML string, Receives the index position of the element in the set and the old HTML value of the Using jQuery methods on SVG documents, unless explicitly documented for that  Unfortunately, the jQuery append() function does not include a callback. There is no way to really check for completion of it, as it supposedly happens immediately. See Here for some info on how to use append efficiently. What it pretty much gets at is you can try to get all of your text into one variable and simply use append once.

.has(), The result of this call is a red background for item 2, as it is the only <li> that has a <ul> among its descendants. Example: Check if an element is inside another. 1. The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is a function to be executed after the hide() or show() method completes (you will learn more about callback functions in a later chapter).

.html(), Get the HTML contents of the first element in the set of matched elements or set If the selector expression matches more than one element, only the first match will or method that accepts an HTML string — jQuery(), .append(), .after(), etc. jQuery Tutorial jQuery HOME jQuery Intro jQuery Get Started jQuery Syntax jQuery Selectors jQuery Events jQuery Effects jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animate jQuery stop() jQuery Callback jQuery Chaining jQuery HTML jQuery Get jQuery Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions jQuery Traversing

.after(), HTML string, DOM element, text node, array of elements and text nodes, or jQuery object to insert after each element in the set of matched elements. content. Type:  Additional Notes: By design, any jQuery constructor or method that accepts an HTML string — jQuery (),.append (),.after (), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, <img onload="">).

Comments
  • Did you just mean $('#tags')? $('div #tags') selects an element with the ID of tags that's a descendant of a div, but that's not the HTML you posted.
  • Unclear what you are saying. Are you saying it does not work if that <P> element is not there?
  • You should probably be using CSS for this, but also what the other people are saying
  • @j08691 With only $('#tags') it doesn't work even if the div has elements inside.
  • Do you have font awesome referenced?
  • It should be noted that div#tags doesn't provide any benefit over #tags. It's slightly higher in terms of CSS precedence but that would only matter if there was another element on the page with the id of tags too (which shouldn't be the case since ids should be unique).
  • This appears to be a typo on the part of the OP, which is typically something we close a question for...
  • With only $('#tags') it doesn't work even if the div has elements inside.
  • @alex3025, because of the uniqueness of the id attribute div#tags and #tags is basically the same thing. There should not be any differences in there behavior:)
  • @alex3025, did you notice the update in the answer?
  • Without $('div #tags') it doesn't append even if the div isn't empty