在新的div中克隆或追加变量？

Question

I have this Html <h1 class="count" role="status">Search results 546</h1>

I'm trying to clone only the numerical '546' of that div and display it inside another div 'h2.count'

I manage to call only the numerical value in an alert via:

var price = $('h1.count').text();
var parsedPrice = parseFloat(price.replace(/([^0-9\.])/g, ''));
     alert(parsedPrice.toFixed(0));

Otherwise , when i try to make it display in the div h2.count instead of an alert, it is not working.

I have try the below:

var price = $('h1.count').text();
var parsedPrice = parseFloat(price.replace(/([^0-9\.])/g, ''));
$parsedPrice.appendTo('h2.onlycount');

Any thought of what i am doing wrong ?

Thanks a lot guys !

Answer 1

I guess that your two html elements are unique so, using id's instead of classes (and native js), try this :

html :

<h1 id="count">Search results 541</h1>
<h2 id="onlycount"></h2>

js :

var price = document.getElementById('count').innerText;
var parsedPrice = parseFloat(price.replace(/([^0-9\.])/g, ''));
document.getElementById('onlycount').innerText = parsedPrice;

https://jsfiddle.net/f3rj2bnv/

And if you want to keep on using jQuery (replace "#" with "." if you want or have to use classes instead of ids in your html elements) :

var price = $('h1#count').text();
var parsedPrice = parseFloat(price.replace(/([^0-9\.])/g, ''));
$('h2#onlycount').text(parsedPrice)

Answer 2

The content used by .appendTo() should be

"a selector expression or as markup created on the fly"

Since in your example neither is true, try this:

 var price = $('h1.count').text(); var parsedPrice = parseFloat(price.replace(/([^0-9\\.])/g, '')); $('h2.onlycount').text(parsedPrice); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1 class="count" role="status">Search results 546</h1> <h2 class="onlycount" role="status"></h1> 

Answer 3

Can use text(function)

 $('h2.onlycount').text(function(_, existingText){ return existingText + $('h1.count').text().replace(/([^0-9\\.])/g, ''); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1 class="count" role="status">Search results 546</h1> <h2 class="onlycount"></h2>