CODEWITHSUNDEEP
javascriptjqueryhtmlcss
clestcruz
clestcruz

Reputation: 1111

Chaining jquery append

I'm trying to figure out how I can chain multiple append into my markup. Basically after appending an element, I would like the next element to append it to the first appended element. I hope what I'm saying makes sense.

If you take a look at my code, I just appended the element <ul class="menu" /> into the element #footer .research-centers-menu .research.

Then on the next code I'm trying to insert/append the variable centers to the <ul class="menu" />

The current output right now doesn't insert the element but places it outside instead. Apologies for my bad english and explanation

var researchCenters = $('a[href$="/items"]').next().clone(),
  centersList = $('li', researchCenters),
  centers = centersList.slice(0);


var research = $('#footer .research-centers-menu .research').append('<ul class="menu" />');

$(research).append(centers);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="aim/items"></a>
    <ul>
      <li>item one</li>
      <li>item two</li>
    </ul>
  </li>
</ul>

<div id="footer">
  this is a footer
  <div class="research-centers-menu">
    <div class="research">

    </div>

  </div>
</div>

Upvotes: 1

Views: 1604

Answers (2)

Ajay Dharnappa Poojary
Ajay Dharnappa Poojary

Reputation: 836

try to append like this.

var researchCenters = $('a[href$="/items"]').next().clone(),
  centersList = $('li', researchCenters),
  centers = centersList.slice(0);


var research = $('#footer .research-centers-menu .research')
var ul =$('<ul class="menu" />').append(centers);
research.append(ul);

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

The cause of your appending issue is because append() returns the original element, not the appended element.

To make your code work you could invert the logic so that you create the new ul, then use appendTo(). This will retain the reference required to append the li. Try this:

var researchCenters = $('a[href$="/items"]').next().clone(),
  centersList = $('li', researchCenters);

var $research = $('#footer .research-centers-menu .research');
var $ul = $('<ul class="menu" />').appendTo($research);
$ul.append(centersList);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>
    <a href="aim/items"></a>
    <ul>
      <li>item one</li>
      <li>item two</li>
    </ul>
  </li>
</ul>

<div id="footer">
  this is a footer
  <div class="research-centers-menu">
    <div class="research"></div>
  </div>
</div>

Upvotes: 6

Related Questions