Div tag code extractor

Question

Is it possible to have a button that when clicked it will extract the whole code within a specific div tag? Is it possible in javescript, jquery, or php?

Say for example:

<div class="extactMe">
<a href="http://stackoverflow.com"><img src="icon.png"></a>
</div>

If I click the button "Extract" on the web page for example, the whole div tag from <div class="extactMe"> to </div> will be copied to a textarea. Please advise thank you.

here is your path to solution http://stackoverflow.com/questions/5744207/jquery-outer-html — MysterX, Sep 25 '15 at 14:34
PHP is server side so not via PHP; or not without a round-about solution involving AJAX. — chris85, Sep 25 '15 at 14:36

score 2 · Accepted Answer · answered Sep 25 '15 at 14:45

2

You can achieve this by using the outerHTML property. Try this:

var divHtml = $('.extractMe').prop('outerHTML');
$('textarea').val(divHtml);

Example fiddle

answered Sep 25 '15 at 14:45

Rory McCrossan

331,213
40
305
339

score 1 · Answer 2 · answered Sep 25 '15 at 14:35

1

Have you tried?

var extracted = $('.extractMe').html();

answered Sep 25 '15 at 14:35

WingmanImd

142
6

Note that this will only get the `a` element inside the `div`. – Rory McCrossan Sep 25 '15 at 14:46
The "$('.extractMe').prop('outerHTML');" did the trick but the solution you gave is something I can use in the future so thank you as well :) – Neil Sep 25 '15 at 14:55

score 0 · Answer 3 · answered Sep 25 '15 at 14:51

Full example over at JSFiddle: https://jsfiddle.net/jo37u3xs/

PHP is not involved here.

The Javascript part:

$(document).ready(function() {

    // when you click the button
    $("#button-extract").click( function() {

        // get the html of the div
        var divContent = $('div.extractMe').html();

        // insert the html of the div into the textarea
        $("textarea#my-textarea").val(divContent);        
    });
});

The HTML:

<div class="extractMe">
   <a href="http://stackoverflow.com"><img src="icon.png">Yo, man. The image is missing.</a><br/>
</div>

<br/>    

<button type="button" id="button-extract">Extract</button>

<br/><br/>   

 <textarea cols="50" rows="10" id="my-textarea">
Its empty at the start. Err, not really.
</textarea>

Please look the following jQuery functions up to understand what they do:

.click()
.html()
.val()
and jQuery Selectors: $(".class") and $("#id")

amazing, yes I will surely do look on to those topics, thank you so much ya'll guys I really appreciate it. Thank you for giving the complete code. Bookmarking it now :) case solved. — Neil, Sep 25 '15 at 15:11

Div tag code extractor

3 Answers3