Jquery克隆html元素到texteara

Question

<ins id="widget"
     style=""
     data-lang="fr"
     data-city-id="669"
     data-font-color="000000"
     data-background-color="ffffff"
     data-border-color="c0c0c0"
     data-datetime-color="000000"
     data-input-background="ffffff"
     data-next-background="d8d8d8">
</ins>
<textarea id="the-code"></textarea>
<button type="button" id="get-code">Get the code</button>

我试图用Jquery克隆ins元素到textarea

$("#get-code").on("click", function () {
    var clone = $("#widget").clone();
    $("#the-code").val(clone);
});

克隆的内容[object Object]在textarea中返回,而不是html代码< ins >

示例: FIDDLE

Answer 1

没有必要克隆元素只是获取outerHTMLdom对象的属性.

$("#get-code").on("click", function() {
  $("#the-code").val($("#widget")[0].outerHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ins id="widget" style="" data-lang="fr" data-city-id="669" data-font-color="000000" data-background-color="ffffff" data-border-color="c0c0c0" data-datetime-color="000000" data-input-background="ffffff" data-next-background="d8d8d8">
    </ins>
<textarea id="the-code"></textarea>
<button type="button" id="get-code">Get the code</button>