How to reuse existing HTML element in a modal?

Issue

Consider a UI that has a custom component <foo>- for now assume its just text.

<foo id="foo-id">SOMETEXT</foo>

I'd like to display this content in two places on the UI - one of which is in a modal. How can I have the modal content delegate to this existing element? I'm using open to Jquery/angularjs or native HTML solutions.

<foo id="foo-id">SOMETEXT</foo>

<div class="modal fade" id="exampleModal" ...>
      ...
      <div class="modal-body">
        ### REFERENCE TO ID #foo-id here ###
      </div>
  </div

I'm trying to avoid using a second instance of the element, eg:

<foo id="foo-id">SOMETEXT</foo>

<div class="modal fade" id="exampleModal" ...>
      ...
      <div class="modal-body">
            <foo id="foo-id-2">SOMETEXT</foo>
      </div>
  </div  

More Context

The reason I actually want to do this is because we have a webpage with a dropdown expander that already renders rich components. We're trying to add a "popout" button that would display the rendered element in a modal window. Because the elements are already in the correct loaded state at the time of popout being pressed, then it makes sense to just delegate the component to a pre-defined one rather than recreating.

Stack is angularJS, bootstrap 3, jquery and I cannot change this :(

Solution

if you not need have two copy you could try detach the element and insert it at his new place

let $fooContent = $("#foo-id");
let $myModal = $("#exampleModal > .modal-body");
...

// set it
$myModal.html( $fooContent.detach() );

// back it
$initialFooContentLocation.append( $fooContent.detach() );

Answered By - r043v