#1
  1. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115

    Add before closing tag


    Hi guys,

    I was fiddling a bit with jquery and for some reason i can't get to insert a <span> right before the endtag of the parent element.

    To make it more clear I have a li and idealy i want to clone() that li and add to that clone a span.

    Code:
    <ul>
      <li>
        <input type="submit" name="bla[]" />
      </li>
    <!-- second li ++  should have spans -->
      <li>
        <input type="submit" name="bla[]" />
         <span>crap</span>
      </li>
    </ul>
    What I was thinking of is to set a variable with the contents of li and than append the span to that content. But in I rather do that in the process of cloning. But I am missing something.

    This is what works, but only for the inner content, not for the cloning.

    javascript Code:
     
    // some script
                    var test = $('li:first').html();
                    $('li').html(test+'<span>crap</span>');
     
    // i rather put this inside this script i made
    $("li:first").clone(true).appendTo('ul');


    Edit1: I played a bit more and I have something that works, but it seems a bit redundant anyone know a more optimal way?
    javascript Code:
     
    //make a copy
    var copied = $("li:first").clone(true);
    // get the innerhtml
    var content = $(copied).html();
    // add some crap to the list
    $(copied).html(content+'<span>crap</span>');
    // append it
    $(copied).appendTo('ul');
    Last edited by aeternus; December 6th, 2012 at 09:02 PM.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Atlanta, GA
    Posts
    14
    Rep Power
    0
    You could go with the following:

    javascript Code:
    // Start with a cached reference to our first list item(s)
    var original = $("li:first-child");
     
    // Now clone them (and their events), append a new <span> and insert 
    original.clone(true).append("<span>Foo</span>").insertAfter(original);

    Comments on this post

    • aeternus agrees : cheers! I overlooked append, which unlike its name adds stuff inside
  4. #3
  5. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    ah the sneaky append(). For some reason I overlooked that one because I thought it posts the content outside of the selector.
    Cheers! Although I wont use the last part otherwise it keeps adding it right after the first row (list-item), even if 3 rows(list-items) are added.

    thanks mate
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Atlanta, GA
    Posts
    14
    Rep Power
    0
    If you have more than one item, you would .appendTo the parent of the cloned item, definitely. I was just going with your code example, which only had one list item. Glad I could help.
  8. #5
  9. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Originally Posted by jonathansampson
    If you have more than one item, you would .appendTo the parent of the cloned item, definitely. I was just going with your code example, which only had one list item. Glad I could help.
    Cheers mate, I gave you a digital reputation coin to celebrate
    edit: hmm it's not showing up it seems, ah well you get the gesture
    Last edited by aeternus; December 7th, 2012 at 11:58 AM.

IMN logo majestic logo threadwatch logo seochat tools logo