4.moving elements around


#1

hi actually this code works to pass challenge but

why $text dont take value of what i assigned to it?

$(document).ready(function(){
var $text = $('hello');

$('#two').after('<p>$text</p>');

})

it shows
Greetings
Div #1
Div #2$text

but i want to see "hello" rather then just $text


#2

The above is written as a jQuery selector using the syntax reserved for type, as in element node type. These would be normal HTML tags.

$('p')     => P-node
$('h1')    => H1-node
$('hello') => HELLO-node (which does not exist)

The previous lesson had us create the first element, a P-node, populated with some text.

    $('#one').after('<p>Hello</p>');

This effectively inserted a new paragrapn element just beneath the DIV with id="one".

In this lesson, we can now target that paragraph since it exists in the DOM. We can see it on the screen, so it can be selected.

    $('#two').after($('p'));

In this statement we used a P-node selector to track down the orginal paragraph and move it to beneath the DIV with id="two".


#3

thanks , i did it.

but what i wanted to do is make some text block as variable to call later rather to write anything between

Tags,
yes i know i am lazy but i do not know if i explain my thoughts in the right way.

also is that possible to make text document add there info and after call it in jquery and add to dom?


#4

There are two ways we can store a string in jQuery. As a string object, or as a jQuery object.

When stored (cached) as a string object, it can be placed in any number of places of our choosing, but it is essentially merged into the document. If we wish to manipulate it further, we will need to find it.

var para = "<p>This is a paragraph</p>"

The above is what we can call an HTML plain string, which is assigned to a JavaScript variable (no need for the $ prefix as that would be misleading).

$('#two').after(para);

Alternately, when stored as a jQuery object, it is a discrete object that can be fetched and moved around at will. Only the one object exists. It is dynamically bound and tracked. If the object is changed, then moved, those changes stay with it in its new location. This will take a minute to think through.

$p = $('<p>').text("This is a jQuery Sprite");

The latter is what I like to refer to as a jQuery Sprite. We can move $p around the document until the cows come home. I did a study on this concept a few years ago that should be in forum achive (the read only section).