CODEWITHSUNDEEP
javascriptjqueryhtml
Logical Error
Logical Error

Reputation: 207

not getting correct way of adding li elements to ul using jquery

I want to add li element to ul in this way 

<li>
    <div>
        <span>Ad</span>
    </div>
    <div>
        <span><a href="#">A title.</a></span>
        <span>Some text here</span>
     </div>
</li>

but through this code below

$(document).ready(function() {
  $('#notify').click(function(e) {
    $('#ul_addon').append(
      $('<li><div>').append(
        $('<span>Ad</span>'),
        $('</div>'),
        $('<div>').append(
          $('<span><a href="#">A title.</a></span>'),
          $('<span"></span>').html("New Text")
        ),
        $('</div></li>')
      )
    );
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="ul_addon">
  <li>
    <div>
      <span>Ad</span>
    </div>
    <div>
      <span><a href="#">A title.</a></span>
      <span>Some text here</span>
    </div>
  </li>
</ul>

<button id="notify" type="button">Add</button>

I'm getting 

<li>
    <div></div>
    <span>Ad</span>// this <span> is out of the <div> above
    <div>
        <span><a href="#">A title.</a></span>
        <span>Some text here</span>
     </div>
</li>

I want to have <span> in <div> element as

<div>
   <span>Ad</span>
</div>

but don't have idea of getting the desired result.

Disclaimer : I'm newbie in JS world please don't mind if you find this stupid.

Upvotes: 1

Views: 606

Answers (4)

Sridhar Narasimhan
Sridhar Narasimhan

Reputation: 2653

You need to append div to li instead of creating div like below

$('<li><div>') 

// will create elements and it will look like <li><li><div></div>

Use the below code instead

$(document).ready(function() {
  $('#notify').click(function(e) {
    $('#ul_addon').append(
      $('<li>').append(
        $('<div><span>Ad</span></div>'),

        $('<div>').append(
          $('<span><a href="#">A title.</a></span>'),
          $('<span"></span>').html("New Text")
        ),
        $('</div></li>')
      )
    );
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="ul_addon">
  <li>
    <div>
      <span>Ad</span>
    </div>
    <div>
      <span><a href="#">A title.</a></span>
      <span>Some text here</span>
    </div>
  </li>
</ul>
<button id="notify" type="button">Add</button>

Upvotes: 1

rrk
rrk

Reputation: 15875

You need to understand how append and element creation in jQuery works. You don't need to use the end tag as a separate append. It does not work like an html string concatenation.

When you provide $('<div>'), it is creating the html element <div></div>.

When you use $('<li><div>'), it will create <li><div></div></li>, but if you chain append() to this, then the next append will work on the parent element, li. That is the reason, span is coming outside of the div.

$(document).ready(function() {
  $('#notify').click(function(e) {
    $('#ul_addon').append(
      $('<li/>').append(
        $('<div/>').append(
          $('<span>Ad</span>')
        ),
        $('<div/>').append(
          $('<span><a href="#">A title.</a></span>'),
          $('<span"></span>').html("New Text")
        )
      )
    );
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="ul_addon">
  <li>
    <div>
      <span>Ad</span>
    </div>
    <div>
      <span><a href="#">A title.</a></span>
      <span>Some text here</span>
    </div>
  </li>
</ul>

<button id="notify" type="button">Add</button>

Upvotes: 1

Jitendra Tiwari
Jitendra Tiwari

Reputation: 1691

Why you don't want to keep it simple instead of using too much append function?

$(document).ready(function() {
      $('#notify').click(function(e){
        $('#ul_addon').append('<li><div><span>Ad</span></div><div><span><a href="#">A title.</a></span><span>New Text</span></div></li>')          
      });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="ul_addon">    
    <li>
        <div>
            <span>Ad</span>
        </div>
        <div>
            <span><a href="#">A title.</a></span>
            <span>Some text here</span>
        </div>
    </li>                                            
</ul>

<button id="notify" type="button">Add</button>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337743

The issue is because you must create an entire element at a time - that is to say it's opening and closing tag (if it has one). You cannot use jQuery to insert only a closing tag.

To fix your code it would be simpler and perform better if you just used a single append:

$('#notify').click(function(e){
    $('#ul_addon').append('<li><div><span>Ad</span></div><div><span><a href="#">A title.</a></span><span">New Text</span></div></li>'));
});

Upvotes: 1

Related Questions