javascript - How do you reload a variable shown in HTML when it changes value? -

my html shows variable inside of script tag, , want reload variable.

<script class="scriptclass">document.write(myobject.myproperty);</script> <button>go</button> 

when function runs changes value of myobject.myproperty, needs updated in html. javascript this:

var myobject = {     myproperty:"initial" }; function mypropertychange(){     myobject.myproperty = "somethingdifferent"; } 

jquery:

$(document).ready(function() {     $("button").click(function(){         mypropertychange();         $("script.scriptclass").empty();         $("script.scriptclass").html("document.write(myobject.myproperty);");     }); }); 

this doesn't work, , i've tried number variations on .replacewith , .replace. tried adding location.reload(true);, think resets whole thing.

instead of reloading <script> tag, can assign <div>. this:

myobject = {};  myobject.myproperty = "initial";  function mypropertychange(){    myobject.myproperty = "somethingdifferent";    $("#theproperty").text(myobject.myproperty);  }    $(document).ready(function() {    $("#theproperty").text(myobject.myproperty);    $("button").click(function(){      mypropertychange();      $("script.scriptclass").empty();      $("script.scriptclass").html("document.write(myobject.myproperty);");    });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <span id="theproperty"></span>  <button>go</button>