CODEWITHSUNDEEP
jqueryhtml
fatiDev
fatiDev

Reputation: 5992

Get div content and then modify it

The scenario is, I want to get a div content and then modify it in order to insert it in another div. Code below : 

$("#loupe").live("click",function(){
    $('#divBody').empty();
    $('#divTitle').empty();
    var title = $(this).closest('div').find('.stepTitle').text();
    var divContent = $(this).closest('div').html();
    // code to modify the content to be inserted in the modal 
    $('#divBody').append(divContent);
    $('#divTitle').append(title);
    $('#div').modal({ dynamic: true });
});

more in detail , the first div contains a title that i want to remove before inserting content into the new div , so the new div must contains content without title

<div>
    <h4 class="StepTitle">Planing des congés pour le service de <%=service.getNomService() %> au <%=month%> / <%=year%>   
        <span style="float: right;">
            <i class="icon-white icon-search" style="cursor: pointer;" id="loupe"> </i>  
            <i class="icon-white  icon-remove" style="cursor: pointer;" onclick="$(this).closest('div').remove();"> </i> 
        </span>  </h4>  
    <table border="1" style="border-color: gray;">
    </table> 
</div>

//************the div into which content will be inserted

<div id="div" class="modal hide fade" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="divTitle">
            //here the title
        </h3>

    </div>
    <div id="divBody" class="modal-body">
        here the other content
    </div>
    <div  class="modal-footer">
        <input type="button" class="btn" class="close" data-dismiss="modal" value="fermer">
    </div>
</div>

Upvotes: 2

Views: 158

Answers (1)

Vivian River
Vivian River

Reputation: 32390

jQuery allows you to work with fragments of a page (as well as XML).

Once you've used the .html method to assign the HTML of an element to a variable, you can operate on the HTML like so:

var html, withoutTitle;
html = $('#someDiv').html();
withoutTitle = $(html).remove('#title').html();
$('#someOtherDiv').html(withoutTitle);

I haven't tested this code, so you may need to tweak it a bit to suit your purposes.

Upvotes: 1

Related Questions