使用jquery .html（）獲取元素本身的html

Question

如何使用Jquery html獲取元素本身的html。 在下面的代碼中，我想使用JQuery作為shwon獲取div中的輸入元素

<div id="content">content div</div>
<input type='text' id="scheduledDate" class="datetime" />

$(function() {

   console.log($('#scheduledDate').html('dsadasdasd'));
    $('#content').html($('#scheduledDate').html());
});

編輯：

我可以將$（“＃scheduledDate”）作為字符串來表示輸入框的真實html代碼，因為我的最終要求是我想將它傳遞給其他一些SubView（我使用的是backboneJS）並最終使用該html代碼在塵埃檔中。 我最初的要求是將輸入字段作為字符串，以便我可以將其傳遞給其他函數。 我知道，如果我將它保存在DIV或其他容器中，我可以使用JQuery的.html方法獲取html。 我不想為此目的使用其他一些東西。 我只是想用它的id來獲取輸入框本身的html內容。

Answer 1

如果要將input元素移動到div中，請嘗試以下操作：

$('#content').append($('#scheduledDate'));

如果要將input元素復制到div中，請嘗試以下操作：

$('#content').append($('#scheduledDate').clone());

注意：在move或copy元素之后，可能需要再次注冊事件偵聽器。

Answer 2

$(function() {

    var content = $('#content');
    var scheduledDate = $('#scheduledDate');

    content.empty();
    content.append(scheduledDate.clone());

});

正如原作者所說，他們明確地想要輸入的html：

$(function() {

    var scheduledDate = $('#scheduledDate').clone();
    var temporaryElement = $('<div></div>');

    var scheduleDateAsString = temporaryElement.append(scheduledDate).html();

    // do what you want with the html such as log it
    console.log(scheduleDateAsString);
    // or store it back into #content
    $('#content').empty().append(scheduleDateAsString);

});

我是如何實現這一點的。 請參閱下面的工作示例： https ： //jsfiddle.net/wzy168xy/2/

Answer 3

一個普通的或純粹的JavaScript方法，可以做得更好......

scheduledDate.outerHTML //HTML5

或者打電話

document.getElementById("scheduledDate").outerHTML //HTML4.01 -FF.

應該做/返回相同的，例如：

>>  '<input id="scheduledDate" type="text" value="" calss="datetime">'

如果是這樣，那就是你要求小提琴

ps：“calss”是什么意思？ :-)

Answer 4

這可以通過以下方式完成：

1.輸入框移動到div，div內容與添加的輸入一起保留

$(document).ready(function() {
var $inputBox = $("#scheduledDate");
$("#content").append($inputBox);
});

2. div被替換為輸入框的副本（如nnn所指出）

$(document).ready(function() {

    var $inputBox = $("#scheduledDate");
    var $clonedInputBox = $("#scheduledDate").clone();
    $("#content").html($clonedInputBox);

    });

3. Div由原始輸入框替換

   $（document）.ready（function（）{

    var $inputBox = $("#scheduledDate"); $("#content").html($inputBox); }); 

https://jsfiddle.net/atg5m6ym/4485/

編輯1：將輸入html作為字符串內部的字符串本身使用此

$("#scheduledDate").prop('outerHTML')

這將輸入對象html作為字符串檢查這個js小提琴，並告訴你這是否是你需要的

https://jsfiddle.net/atg5m6ym/4496/