Copying div content and placing it elsewhere

I'm creating a quoting system within a custom bulletin board.

What I need to do is to copy the contents of one div, but place it in a text-area with additional开发者_如何学JAVA elements.

Could I use jQuery in assisting me to do this?

How would I do this?

---

Manipulate string and then copy

This is probably what you're after:

var stringContent = $("#SourceDivID").html();
$("#TextAreaID").val("This is content:\n" + stringContent);

Then you can easily manipulate your textarea content at your own will. This will copy the whole DIV sub-tree (including all elements) not just textual content. But you have to be aware that DIV's content becomes a string.

Manipulate HTML elements and then copy

If you'd like to manipulate HTML elements then do it this way:

var div = $("#SourceDivID").clone();
// manipulate
$("#SomeSubElementID", div).append(/* add something inside at end */);
$("#SomeSubElementID", div).prepend(/* add something inside at start */);
div.before(/* add something in front */);
div.after(/* add something after it */);
...
// add to textarea
$("#TextAreaID").val(div.html());

Using .text() or .html()

If you'd only need to use textual content then use .text() instead .html(). Example:

<div id="test">
    Some text <strong>emphasized.</strong>
</div>

What each of these returns:

$("#test").text() => "Some text emphasized."
$("#test").html() => "Some text <strong>emphasized.</strong>"

Wrapping content in a new element

If you'd like to wrap the whole content inside a new element and then copy (this would be something common for a forum post) do it this way:

var div = $("divID").clone();
// wrap it
div = div.wrap("<quote/>").parent();
// display in textarea
$("textareaID").val(div.wrap("<div/>").parent().html());

Why do we have to wrap it twice? Because .html() only returns inner HTML of an element. So if we want to return wrapped content as well, we have to wrap it again and then display inner HTML of the newly wrap element. That's the only reason why double wrapping is required.

JSFiddle examples

• Wrapping all text between [quote] and [/quote]: click here
• Wrapping all elements inside <quote> element: click here

---

If I understand your question right...

var oldText = $('#yourTextBox').val();    
$('#yourTextboxID').val(oldText + $('#yourDiv').html())

---

You can use something like

$("#textareaid").val($("#divid").text());

where textareaid is the id of your <textarea> and divid is the id of the <div>.

---

Yes

If you have a div with an id of myDiv:

 alert($('#myDiv').html());

will give you the html within that div.

You have lots of choices for how to move it:

If you have an empty div with id of myDestination. Then

 $('#myDestination').html($('#myDiv'));

will move the contents of myDiv into myDestination

You may also want to check out jquery .Append, .Prepend, etc at http://api.jquery.com/category/manipulation/dom-insertion-inside/ for other options if you don't have an empty destination div.

If you want the string output from the Div (i.e. show the HTML within a TextArea) then it's similar:

 $('#myTextArea').val($('#myDiv').html());

---

Yes it is possible!

D E M O

var copy = $('#content').html();

$('#textarea').html(copy.replace("\n","")); // best practice!
// $('#textarea').html(copy);  // standard way
//$('#textarea').html(copy.replace(/\r\n/g,'\n').replace(/\n/g,'<br>')); // to add <br> instead of new lines

There is more:

Ex:

JSfiddle

or:

JSfiddle

There are many ways, I used in this Ex:

var copy = $('#content').text(); // you can use: .html()
$('#textarea').val(copy);

$('#textarea').val( $('#content').html() ); // or use .text()