0

I have this jQuery code:

function test(){
    var $h=$('<h2>').text('title')
        $p=$('<p>').text('sample'),
        $result=$h.after($p);
    return $result;
}

I expect when i show the $result in the page, it be:

<h2>title</h2><p>sample</p>

But it is:

<h2>title</h2>

How should i change the code to solve this issue?

Edit1: I want return this result by calling test() function and i wont use any parnet element in the function or as a parameter. Realy i want return this collection of jQuery elements!

Ramin Bateni
  • 16,499
  • 9
  • 69
  • 98
  • 1
    What issue are you trying to solve, the result you describe is just jQuery working as it's meant to work; look at the API for the [`after()`](http://api.jquery.com/after/) method to see why. – David Thomas Oct 25 '16 at 13:22
  • Dont define your variables with `$` in front. – serraosays Oct 25 '16 at 13:23
  • 1
    @staypuftman why is that? – smcd Oct 25 '16 at 13:25
  • 1
    @staypuftman It's apparently a commonly used way to distinguish between jQuery objects stored in variables and normal variables, according to this answer http://stackoverflow.com/a/553734/1804496 So I believe it is perfectly fine to do this. – Zack Oct 25 '16 at 13:43
  • @staypuftman I'm also curious as to why you suggest that. I do that all the time to differentiate between jQuery wrapped DOM objects and other variables, and I must say it's quite handy for reading code. – Jose Faeti Oct 25 '16 at 13:47
  • I always use $ to distinguish between jQuery objects stored in variables and normal variables and it's fine! – Ramin Bateni Oct 25 '16 at 13:51
  • @RAM you can return a single object from a function. So in your case, you must return a parent of both

    and

    siblings. i.e. you have to define a parent object and return that object.

     – Jose Faeti Oct 25 '16 at 13:52
  • A JS variable can store a jQuery object without the `$` - it's extraneous. If it helps you read the code, I guess that's a bonus. – serraosays Oct 25 '16 at 14:43
  • @staypuftman, I think every beginner *javascript* programmer know he/she can use variable names without `$` in javascript!!! Have you ever used `strTitle`, `intCounter`, `doublePrice` and like it as name of the variables in your applications? Ok, my `$result` variable is just like theme! and `$` sign remember me that this variable value is an object of *jQuery*. – Ramin Bateni Oct 25 '16 at 15:23
  • @RAM - I teach Javascript to people and I can tell you beginners don't know what a variable even is. I think it also invites confusion with PHP because every PHP variable starts with a `$` - and many of my students get introduced to PHP via WordPress without fully learning JS first. Those are my thoughts but you are right, totally valid and useful in JS - just not for beginners in my estimation. – serraosays Oct 25 '16 at 15:34
  • @staypuftman, so i hope beginner js programmers don't come to stackoverflow! because they will be confused here base your comment but i think when someone is writing a question about jQuery he know js variables also you could see my profile. Anyway thanks for your comment. ;) – Ramin Bateni Oct 25 '16 at 18:32

1 Answers1

2

This should work

var $h = $('<h2>'),
    $p = $('<p>');
$h.text('title');
$p.text('sample');
$('body').append($h);
$h.after($p);

First declare your elements, then set their texts, then append everything in order in the DOM.

https://jsfiddle.net/jhjoorbc/

Edit

If you want to return the newly created objects from the function, you must first create a parent objects for the two <h2> and <p> siblings, and return that object.

function text(){
    var $h = $('<h2>'),
        $p = $('<p>'),
        $container = $('<div>');
    $h.text('title');
    $p.text('sample');
    $container.append($h).append($p);
    return $container;
}
Jose Faeti
  • 12,126
  • 5
  • 38
  • 52
  • Thank you for your reply but i know this way! and i want to return `$result` from a function and the function is unaware of the parent element like `body` or... – Ramin Bateni Oct 25 '16 at 13:54
  • You need a parent element if you want to return both elements, as you can only return a single element from a function :) Check my edit with an example to return both

    and

    siblings wrapped in a

    element.
     – Jose Faeti Oct 25 '16 at 13:56
  • Your suggestion is correct but my parent object is out of the function and i want append the $result to it without any temp parent? Is it possible? I want just sure there is not any way to do this work like as i explained in my question (without parent object). – Ramin Bateni Oct 25 '16 at 14:00
  • Sure, you just have to pass to the function the element you want to append the newly created elements to as a parameter. – Jose Faeti Oct 25 '16 at 14:02
  • 1
    Thank you, i will pass the parent object to the function ;) – Ramin Bateni Oct 25 '16 at 14:04