load content from div and add it into another div within the same page

Question

I have an element which contains some html content like this :

<span class="ecf-answer">Content here</span> and another div where I want to load the content from the span element : <div>Content taken from the span element </div> .

Is this possible using jQuery ?

I've made a search here but I've found just methods on how to load div content from another page not from the same page.

Answer 1

Fiddle Demo

$('#divID').html($('span.ecf-answer').html());

.html()

Also read .append() and Dom insertion inside

Answer 2

You will have to give your span and div an id. Once this is done it's pretty easy to do this just with JavaScript like this:

document.getElemenetById("divId").innerHTML = document.getElemenetById("spanId").innerHTML;

jQuery could be used but wouldn't add much value.

Answer 3

Okay, for standard JS lovers like me:

document.getElementById("div2").innerHTML = document.getElementById("div1").innerHTML;

Where the div2 is destination and div1 the source...

JSFIDDLE

Answer 4

Javascript works on the client side, so you can "move" the information in the same page, but the question is, when do you want to move it? On a button click?

You can use Javascript to load the original content in a hidden input like:

<span class="ecf-answer">Content here</span>
<input type="hidden" value="Content" id="originalContent">

and then:

function(){
 var content = document.getElementById('originalContent').value;
 document.getElementById('id').innerHTML = content;
}

Answer 5

here is the html

<div id="divAddMe"></div>
<span id="spmMessage">
test me
</span>

//script to add the content from the span

$(function(){
   $("#divAddMe").html($("#spmMessage").text())
});