Develop Reference

How do you move text from a div into an input value?

I am trying to move text from inside a div into the value from an input field but I'm getting [object Object] as the output. Can anyone explain why?
input = $('#input').contents();
$('#output').val(input);

Spencer.
The .contents() method won't give you the text, but an object with a collection of the elements it contains. You sould use:
val method:
The .val() method is primarily used to get the values of form elements
such as input, select and textarea.
text method:
The .text() method cannot be used on form inputs or scripts. To set or
get the text value of input or textarea elements, use the .val()
method.
The line you're looking for is:
$('#input').val($('#div').text());
and can be decomposed like this:
var textToMove = $('#div').text();
$('#input').val(textToMove);
Here is a full example:
function move(){
$('#input').val($('#div').text()); //copy text
$('#div').text(''); //erase text
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='input' type='text' value=''>
<div id="div">Hello, Spencer</div>
<button onclick='move()'>Click to move text</button>

First get the text content with
$("#d").text()
Add this to input like
$("#y").val($("#d").text());
Now you can remove text of div like
$("#d").text("")
$("#y").val($("#d").text());
$("#d").text("")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="d">text</div>
<input type="text" id="y"/>
Note:
Given a jQuery object that represents a set of DOM elements, the .contents() method allows to search through the immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements. and the results includes text nodes and comment nodes as well as HTML elements in the resulting jQuery object. Here
That's why you are getting object. you really need to use .text() here to get the text contents only.

The contents() you were trying to use is defined by the jQuery documentation as
To get the children of each element in the set of matched elements,
including text and comment nodes
So, contents() is returning en entire object with all those children, comments and etc... that's why: [Object Object]. If you use console.log($('#input').contents()) you will be able to see the entire object in the console.
So, in that case, it's better to use text(), that get only the text content of the element matched.
After getting the text, then set it to the input with val();
the example below shows this. (I added a timer just to better represent the code working, you can remove it and let only the code that is inside).
Also, if you want to keep the text in the div, remove the part where I used .text('');
setTimeout(function(){
input = $('#input').text();
$('#output').val(input);
$('#input').text('');
}, 1500);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' value='' id="output">
<div id="input">Abcdef 1234567890</div>

Replacing text with <span> using javascript

I need to replace each word in the textarea by a span with unique id. I need the code in JavaScript. I have tried creating a DOM element and inserting it in text area using the following code.
var s = document.createElement('span');
var text=document.createTextNode("inside tag");
s.appendChild(text);
document.getElementById("t1").appendChild(s);
t1 is the is the id of my text area. The above code isn't giving any result.
Also, I tried another method:
document.getElementById("t1").innerHTML="<span>inside tag</span>";
innerHTML isn't working here.
What do I do?

It has to be the value property instead of the innerHtml because of the fact that value property is used for setting the value for input/form elements. innerHTML on the other hand is normally used for div, span, td and similar elements.
So as you are using a textarea you shall go with value property.
document.getElementById("t1").value = "Whatever the text/html you want to insert here";

To change your value of text arena, you will have to do this:
document.getElementById('t1').value = '<span>inside tag</span>';

Jquery: .html() substitute the text in a div tag, but how do I add to instead of substitute?

I'm new to JQuery. Got a simple question.
<div id="result"> hello </div>
...
$("#result").html()
$("#result").html() substitutes the text inside div tag to the returned result I need, but how do I adding the returned result in div tag instead of changing it completely? I guess there might be another function to do this job. What is it? Thanks.

Just use
$("#result").append("Some text");
And this will add Some text to the end of your string.
So it would look like hello Some text

You can use callback function of .html():
$("#result").html(function(i,oldhtml){
return oldhtml + "<span>abc</span>";
})

How to add a node to the end of the textarea

i have an array of control ids and this is how i retrieve them
var control = document.getElementById(arrVarIDToControlID[variable_id]);
for the text boxes am able to append the node to the parent node(textbox) but for the text area am not able to append the node to the parent(textarea) but it adds the node to the page instead
control.parentNode.appendChild("text");
i use the above code to append. how can i be able to append to the textarea but not the page??

Have you tried:
$('#'+arrVarIDToControlID[variable_id]).parent().append('<div>text</div>');
You can try to append the text only but I recommend to always use a container

Try using insertAfter() on the TextArea control.
$(arrVarIDToControlID[variable_id]).insertAfter("text");

Reading a value from 'this' instance in jQuery

When I am printing 'this' instance in alert box, it is printing something like this.
[object Object]
But the actual content in it is
<dl>
<dt>
my Name <span> John Krishna </span>
</dt>
<dd>
<span>My fathers name</span>
</dd>
</dl>
I want to display only 'my Name' instead of [object Object]. I mean what ever content of span in that 'dt' I want to display it in my alert box.
For this I tried out around in google, every where I am getting solutions like use child, or using inner html content and in some solutions someone written for loops. But I don't want to write any for loops around it which makes my code large.
Some one please suggest me some way that how can I print only "my Name" in alert box.

It depends on how you did the selection. If it is on the whole dl tag, than it should be something like this
alert($("dl").find("dt").clone().find("span").remove().end().html());
Where dl is an example selection. I don't know how you get it (by id, class etc.)
if you're selecting dt tag directly, than you should use a shorter version
alert($("dt").clone().find("span").remove().end().html());

It sounds to me like you're trying to alert an entire object. You'll need to make use of jQuery's text() method to display only the element's text.
If this is already selecting the span element you're after, you can simply use:
alert($(this).text()); // Instead of alert($(this));
I need only text inside 'dt' and content inside span should not be printed
For this we can use a regular expression to replace the <span> content from the dt element's HTML:
alert($('dt').html().replace(/<span>.*<\/span>/,''));
Here's a JSFiddle demo of this in use.
This is 96% faster than using cloning the element as some of the other answers below have suggested.

Add an id to the span (e.g. <span id="myname">Test Name</span>) and then match on the id in jQuery (using $("#myname")) and alert the text of that element to return what you need.
For example:
alert($("myname").text());

try to map : collecting them into an array instead of two calls to $:
var texts = $('span').map(function(){
return this.previousSibling.nodeValue
});
texts[0]; // "Some text followed by "
texts[1]; // " and another text followed by "
alert(texts[0]);
Hope it will help

you will need to use:
$(this).html();

try this:
var name=$(this).children('dt').children('span').text();
alert('name --->'+name);
Thanks

Use:
alert($(this).find("dt span").text());
Getting the text outside of the span is a little tricky in jQuery. I found this code here:
var myName = $(this).find("dt")
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();