get the html of element itself using jquery .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.

An input doesn't have html. It has val(), though. Is that what you want? Also, if you replace the html of content, then the input will be replaced.... — random_user_name
– random_user_name, Commented May 13, 2016 at 23:56
Standard way is to append what you want to a container and use .html on that container — juvian
– juvian, Commented May 13, 2016 at 23:56
I want the entire input element itself to be copied inside div element — user1614862
– user1614862, Commented May 13, 2016 at 23:59
@cale_b you're partially right, the input isn't in the #content div though so it will not be overwritten when #content's inner html is replaced. — sheeldotme
– sheeldotme, Commented May 13, 2016 at 23:59
"I want the entire input element itself to be copied inside div element" - You don't need to get its html to do that, you can use .clone() and .append(). (It is possible to get its html, but that would take extra steps that you don't need if your goal is just to copy or move it into the div.) @cale_b - An input does have html, that is, the html used to define the input in the first place. — nnnnnn
– nnnnnn, Commented May 14, 2016 at 0:07

Haizhou Liu · Accepted Answer · 2016-05-14 00:10:30Z

2

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.

answered May 14, 2016 at 0:10

Haizhou Liu

4912 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1614862 Over a year ago

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.

sheeldotme Over a year ago

@user1614862 see my answer to see how you can get the actual html.

user1614862 Over a year ago

yes, I have seen your answer and debugged it. It is showing the object representation of the input field. It works perfectly if I append it to DIV, but 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 it the html content of input box itself using it's id.

sheeldotme · Accepted Answer · 2016-05-14 02:53:00Z

1

$(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/

edited May 14, 2016 at 2:53

answered May 14, 2016 at 0:10

sheeldotme

2,5731 gold badge17 silver badges30 bronze badges

Comments

Bekim Bacaj · Accepted Answer · 2016-05-14 10:22:51Z

0

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, e.g.:

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

if this, is what you are asking for fiddle

p.s.: what do you mean by "calss" ? :-)

answered May 14, 2016 at 10:22

Bekim Bacaj

6,0152 gold badges27 silver badges26 bronze badges

2 Comments

user1614862 Over a year ago

I think this is what I am looking for. Can I use this HTML5 syntax in my backbone view js file? I meant "class", I edited it.

Bekim Bacaj Over a year ago

lol "class" :) it is I'm pretty sure the answer is because JavaScript is the backbone of pretty much everything in the web. and for as long as it allows you to handle the element of interest directly as it exists in DOM tree. Because trying to call a dom property of element using jQuery selector such as: $('#scheduledDate') will not work because the versions I tried are using some sort of object wrapper, where this dhtml property is not available. So fiddle around a bit...

Imprfectluck · Accepted Answer · 2016-05-14 14:30:51Z

-1

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

    });

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/

edited May 14, 2016 at 14:30

answered May 14, 2016 at 0:07

Imprfectluck

6847 silver badges27 bronze badges

6 Comments

nnnnnn Over a year ago

Or 3. Append a copy. (OP doesn't make it clear whether to append or copy.)

Imprfectluck Over a year ago

Yup added that to the answer

sheeldotme Over a year ago

Neither one of the first two methods you've provided work in the jsfiddle you've provided.

Imprfectluck Over a year ago

@sheeldotme edited the first one.And the second one works fine. Just check the fiddle i have provided.it works fine. Made a copy paste error there ont the first.First try it before you knockit. Thanks

user1614862 Over a year ago

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.

|

Collectives™ on Stack Overflow

get the html of element itself using jquery .html()

4 Answers 4

3 Comments

Comments

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related