jquery storing dynamic innerhtml into usable jquery variable

Question

var = cooldynamicelement

How could I store the inner html I grab with jQuery from my div ie. <div class="username"> </div> to store as an accessible variable in jQuery eg. cooldynamicelement so I can grab and use at different areas of my site by just calling ie. $cooldynamicelement and updates with the dynamic .username element value.

Answer 1

1. Store HTML into localStorage

var dynamicElementHTML = localstorage.dynamicElementHTML || $(".username").html() || "";
localstorage["dynamicElementHTML"] = dynamicElementHTML;

To make it available to other pages a way would be to use the power of localstorage

https://developer.mozilla.org/en/docs/Web/API/Window/localStorage

If you're actually interested in the whole element (not only it's inner HTML) than instead of .html() use .prop("outerHTML")

---

2. Binding using jQuery (essential idea)

If you only want a way to reflect some variable HTML as actual html and make it alive you could do like:

var $myElement = $("<div />", {
  class : "userData",
  append : $someDynamicElements,
  appendTo : $someParentElement,
  on : {
    contentUpdate : function() {
       $(this).html( $someDynamicElements );
    }
  }
});

than whenever your $someDynamicElements changes you can trigger a contentUpdate

$myElement.trigger("contentUpdate")

3. Binding using jQuery (concept)

Here's the same elements binding concept gone wild:

// Here we will store our elements
var EL = {};
// Create desired HTML elements like this:
var LIST = {
  
  username: $("<b/>", {
    html : "UNKNOWN",
    click : function() {
      alert( $(this).text() );
    }
  }),
  
  email: $("<a/>", {
    html : "test@test.test",
    href : "mailto:"+ "test@test.test"
  }),
  
  // add more here, you got the idea.
  // don't forget that you can assign any JS / jQuery propery to your element.
  // You can go insane using .on() and later .trigger()
  
};

// Our small "program" that replaces data-bind elements
// with dynamic elements from our list

$("[data-bind]").replaceWith(function(i){
  var bind = this.dataset.bind;
  if(!LIST[bind]) return;
  if(!EL.hasOwnProperty(bind)) EL[bind] = [];
  var klon = LIST[bind].clone(true)[0];
  EL[bind].push(klon);
  return klon;
});

// That's it. Now goes your code ///////////////


$(EL.username).css({color:"red"}); // just to test if it works :D


$("[data-target]").on("input", function(){
  var target = this.dataset.target;
  $(EL[target]).html( this.value );
});

// P.S: Even having thousands of elements inside EL
// say you have "EL.tableRows" you can do fabulously
// quick stuff like i.e: sorting, cause you iterate over a plain JS array.
// After the sorting of EL.tableRows is done and you need a jQuery  
// representation simply use $(EL.tableRows).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Dynamic element Binding in jQuery</h2>
Enter some text and see the update trigger in different places<br>
<input data-target="username"><br>

Welcome <span data-bind="username"></span> !!<br>
You name is <span data-bind="username"></span> Click the red text!<br>
<span data-bind="email"></span>

Answer 2

Well if you want to have the jqueryObject in a variable, just do this:

$(function(){
    window.$cooldynamicelement = $("div.username");
})

that way you're able to use $cooldynamicelement in a global context. If is that what you want. This way you're saving a reference to your .username element and thus every time you use it will be updated.

NOTE: If you decide to do this, be careful with polluting your global context.: