jQuery: $.add() and $.append() methods not working correctly?

Question

JavaScript

wrote a small example. it should add an element to it by clicking on it. I got acquainted with jQuery recently and the work of these $.add() and $.append() functions is puzzling. here is the code in short:

<style><br>
.div {<br>
  background-color: yellow;<br>
  width: 50pt;<br>
  height: 50pt;<br>
}<br>
</style><br>

<script type="text/javascript"><br>
  $("p #add").click(function() {<br>
    $(this).add("div").css("class", "div");<br>
  });<br>
  $("p #append").click(function() {<br>
    $(this).append("<div class='div'></div>");<br>
  });<br>
</script><br>

<p id="add">click me and i'll try to show you a div with $.add()</p><br>
<p id="append">click me and i'll try to show you a div with $.append()</p><br>

links to API:
$.append()
$.add()

when I click on in both cases nothing happens. wtf?

you can fully download and open test.html in the browser from here

UPD: jQuery code now:

$(document).ready(function(){<br>
  $("p#add").click(function() {<br>
    $(this).add("div").css("class", "div");<br>
  });<br>
  $("p#append").click(function() {<br>
    $(this).append("<div class='div'></div>");<br>
  });<br>
});<br>

$.append() worked, $.add() still didn't

Answer 1

As I understand it, you want to find such an analogue of the call

$(function(){
   $("p#append").click(function(){
      $(this).append("<div class='div'></div>");
   });
});

which would create an element by name and then provide it with a class, and then attach it to the specified one.
Then it's this:

$(function(){
   $("p#append").click(function(){
      $('<div />').addClass('div').appendTo($(this));
   });
});

The .add() method wo n't work because it's used to add $-sets. For example, it can be used to add two div elements instead of one:

$(function(){
   $("p#append").click(function(){
      $('<div />').add('<div />').addClass('div').appendTo($(this));
   });
});

The .css() method won't work because it's used to overlay CSS properties. For example, this call:

$(function(){
   $("p#append").css('color', 'red');
});

imposes a property

{color: 'red';}

Answer 2

1) 2)
Syntax error at line 5 while loading:
$("p #append").click
^
expected ')', got '$'
$("p #add") → $("p#add")
$("p #append") → $("p#append")

Answer 3

$.append() worked, $.add() still didn't

What do you mean it didn't work? Let's analyze your line:
$(this).add("div").css("class", "div");
1) Select the this element (paragraph) in the object.
2) Add to this object with paragraphs all the divs found on the page. Since there are probably no divs on the page, the result does not change, $(this).
3) Apply .css("class", "div") to these objects.
By the way, what is this new css property, class? Never heard of such a thing.
Regarding point 1) Syntax error at line 5 while loading:
In the proposed archive for downloading, the code looks like this: Without closing brackets and semicolons.
$("p #add").click(function() {…}
$("p #append").click(function() {…}

Answer 4

I can’t say anything about the append method, but jQuery add is described in sufficient detail.