I would like to add some html content within a selected div like most of the plugins are.

Eg:

```
<div id="selected-div">
</div>

$('#selected-div').foo();

```

When the div (`selected-div`) is passed to the function, I would like to add the below html content inside that div (`selected-div`).

```
<div id="lorem-ipsum-wrapper">
  <ul id="lorem-ipsum-main">
    <li id="btn-header-wrapper" class="main-btn">
      <a href="#" id="btn-T">T</a>
      <ul>
        <li>
          <a href="#" id="btn-T1">T1</a>
        </li>
        <li>
          <a href="#" id="btn-T2">T2</a>
        </li>
        <li>
          <a href="#" id="btn-T3">T3</a>
        </li>
        <li>
          <a href="#" id="btn-T4">T4</a>
        </li>
      </ul>
    </li>
    <li class="main-btn">
      <a href="#" id="btn-E"><b>E</b></a>
    </li>
    <li id="btn-justify-wrapper" class="main-btn">
      <a href="#" id="btn-gender">Gender</a>
      <ul>
        <li>
          <a href="#" id="btn-M">M</a>
        </li>
        <li>
          <a href="#" id="btn-F">F</a>
        </li>
        <li>
          <a href="#" id="btn-other">other</a>
        </li>
      </ul>
    </li>
    <li class="main-btn" id="btn-list-wrapper">
      <a href="#" id="btn-list">List</a>
      <ul>
        <li>
          <a href="#" id="btn-1list">List 1</a>
        </li>
        <li>
          <a href="#" id="btn-2list">List 2</a>
        </li>
      </ul>
    </li>
    <span class="clear_both"></span>
  </ul>
</div>

```

Demo at [codepen](http://codepen.io/Kakar/pen/xwOZRa).

Which after execution should become like this

```
<div id="selected-div">  
  <div id="lorem-ipsum-wrapper">
    <ul id="lorem-ipsum-main">
      ...
      ...
      ...
    </ul>
  </div>
</div>

```

How can I achieve this feature using jquery? Your help and guidance will be very much appreciated. Thank you.