div标签代码提取器

Question

是否有可能有一个按钮，当点击它会提取特定 div 标签中的整个代码？可以在 javescript、jquery 或 php 中使用吗？

比如说：

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

例如，如果我单击网页上的“提取”按钮，则从 <div class="extactMe"> 到 </div> 的整个 div 标签将被复制到文本区域。请指教谢谢。

Answer 1

您可以通过使用outerHTML 属性来实现此目的。试试这个：

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

Example fiddle

Answer 2

你试过了吗？

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

Answer 3

JSFiddle 上的完整示例：https://jsfiddle.net/jo37u3xs/

这里不涉及 PHP。

Javascript 部分：

$(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);        
    });
});

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>  

请查看以下 jQuery 函数以了解它们的作用：

• .click()
• .html()
• .val()
• 和 jQuery 选择器：$(".class") 和 $("#id")