jQuery-在选定的div中添加html内容（如插件）

Question

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 .

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.

Answer 1

Use .html()

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

or .load()

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

Answer 2

var data = '<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>';   

$("#selected-div").html(data);

Answer 3

您可以像这样使用JQuery text（）方法

$("#selected-div").text($('#lorem-ipsum-wrapper').text());

Answer 4

Here is the JS code :

$(document).ready(function(){
    $("#selecteddiv").load('add.html');
});

and in add.html, you can have your html code which you want to append.

here is the working Plnkr link.

hope it helps you

Answer 5

append would also be an option

http://api.jquery.com/append/

$("#selected-div").append($("<h1>Some content</h1>"));