javascript - Jquery 克隆 html 元素到 textarea

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 元素克隆到文本区域

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

克隆的内容返回[object Object]在文本区域而不是 html 代码中 < ins >

示例: FIDDLE

Answer 1

没有必要克隆元素只得到 outerHTML dom 对象的属性。

$("#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>