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

Question

How to get the html of element itself using Jquery html. In the below code I would like get the input element inside div using JQuery as shwon below

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

$(function() {

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

EDIT:

Can I get the $("#scheduledDate") as string which represent the real html code of the input box, because my final requirement is I want to pass it to some other SubView( I am using backboneJS) and eventually use that html code in a dust file. My original requirement was to get that input field as string so that I can pass it to some other function. I know, if I keep it inside a DIV or some other container, I can get the html by using .html method of JQuery. I dont want use some other for that purpose. I am just trying to get html content of the input box itself using it's id.

Answer 1

If you want to move the input element into div, try this:

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

If you want to copy the input element into div, try this:

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

Note: after move or copy element, the event listener may need be registered again.

Answer 2

$(function() {

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

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

});

As the original author has stated that they explicitly want the html of the input:

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

});

Is how I would implement this. See below for a working example: https://jsfiddle.net/wzy168xy/2/

Answer 3

A plain or pure JavaScript method, can do better...

scheduledDate.outerHTML //HTML5

or calling by

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

should do/return the same, eg:

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

if this, is what you are asking for fiddle

ps: what do you mean by "calss" ? :-)

Answer 4

This can be done the following ways:

1.Input box moved to the div and the div content remains along with the added input

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

2.The div is replaced with the copy of the input box(as nnn pointed out)

$(document).ready(function() {

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

    });

3. Div is replaced by the original input box

   $(document).ready(function() {

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

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

EDIT 1: to get the input html as string inside the div itself use this

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

This will give the input objects html as string Check this js fiddle and tell if this is what you need

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