javascript - jquery - 像插件一样在选定的 div 中添加 html 内容

Question

我想像大多数插件一样在选定的 div 中添加一些 html 内容。

例如:

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

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

当 div (selected-div) 传递给函数时，我想在该 div (selected-div) 中添加以下 html 内容。

<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>

演示在 codepen .

执行后应该变成这样

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

如何使用 jquery 实现此功能？非常感谢您的帮助和指导。谢谢。

Answer 1

使用.html()

$("#selected-div").html('<div id="lorem-ipsum-wrapper">..');

或.load()

$("#selected-div").load("/path/to/html")