CODEWITHSUNDEEP
jqueryhtmljquery-ui
user1840841
user1840841

Reputation: 29

Inserting html from jquery

I have a razor view in which i am generating html using below code everything is fine

<ul>
        @foreach (var resx in Model.Resxs()) 
        {
            tempWidth = tempWidth + @resx.ChildSitePartVrsn.ResxVrsn.WidthInPx;
            temp = temp + 1;
            width = @resx.ChildSitePartVrsn.ResxVrsn.WidthInPx + "px"; 

            <li style="width:@width;">
                @if (tempWidth <= 960){
                    <a href="#tabs-@temp">@resx.ChildSitePartVrsn.SitePart.NameInUse</a>
                }
                else{           
                    <a href="#tabs-@temp" class="hide">@resx.ChildSitePartVrsn.SitePart.NameInUse</a>
                }
            </li>
        }
        @* needs to be inserted after the last visible tab. *@
        <li><input type="button" id="moreTabs"/></li>
    </ul>

and i want to insert an li having button between specific two of the above generated li's i have this below code. I am getting all the values when i debug script in firebug, but the element is not created in html, surprisingly i am even loosing some of the html i got earlier, without the below code html remains same, but i have to do that as per my requirement.

$("<li><button id=\"moretabs\"></button></li>")
                .before(
                    $("a.hide", that.element)                        
                        .first()
                        .parent("li")                        
                );

Any work around plz....................

Upvotes: 0

Views: 67

Answers (2)

Jude Duran
Jude Duran

Reputation: 2205

Try using append() instead

$("yourSelector").append("<li><button id='moretabs'></button></li>");

Upvotes: 0

adeneo
adeneo

Reputation: 318302

before() inserts an element before another element in the DOM, so calling it on a new element does not insert anything into the DOM:

var li   = $('<li />'),
    btn  = $('<button />', {id:'moretabs'}),
    elem = $('a.hide').closest('li'); // actual element existing in the DOM

li.append(btn).insertBefore(elem);
// or
elem.before( li.append(btn) )

Upvotes: 1

Related Questions