francoleung francoleung - 2 months ago 9
HTML Question

How to get append value in jquery or other method?

How to get append value in jquery or other method?

I want to show the the value Hello Append!!! append value on

<div id="get_append_value"></div>
tag,

My Javascript code:


$(document).ready(function() {
$("#show_append_value").append("Hello Append!!!");
});


My Html code


<body>
<div id="show_append_value"></div>
<div id="show_hello_world">Hello World!!!</div>
<br>
<br>
<div id="get_append_value"></div <!--need to use jquery to show 'Hello Append!!! on it, but result is empty'-->
<div id="get_hello_world"></div>
</body>




<script>
var $show_value = $('#show_append_value').html();
$('#get_append_value').html($show_value);
var $show_value2 = $('#show_hello_world').html();
$('#get_hello_world').html($show_value2);
</script>


This result:

Hello Append!!!
Hello World!!!


Hello World!!!


Although it can show the value on
<div id="show_append_value">
and
<div id="show_hello_world">
, it doesn't give the appended value to show on
<div id="get_append_value"></div>
, it is empty

Can anyone teach me how to get the appended value in jquery or other method to show the value on other div tag?

Answer

Your code executes in the wrong order.

Any code that is put directly in a script tag, outside of any call-back, is executed before what you have inside the ready call back, so that means Hello Append!! is not yet in your document when you are fetching it.

To solve this, put all of your code in the ready event handler:

$(document).ready(function() {
  $("#show_append_value").append("Hello Append!!!");

  var $show_value = $('#show_append_value').html();
  $('#get_append_value').html($show_value);
  var $show_value2 = $('#show_hello_world').html();
  $('#get_hello_world').html($show_value2);
});