How do I get outter HTML from a dynamically created checkbox w/ jQuery?

Question

I am trying to get the HTML of an element to use in a template.

I tried using jQuery to create the element and then grab the HTML, but that doesn't seem to do what I thought it would do.

I am able to get most of the HTML string from the new element, but the "checked" attribute doesn't seem to get saved.

I can manually build up the HTML, but I'd rather have a library helper to make sure I don't make any silly typos.

Here is what I am trying to do...

http://jsfiddle.net/Kp8e5/28/

score 1 · Answer 1 · edited Jun 04 '10 at 13:05

Well, what you are trying to do is very difficult.

As per the jquery documentation on .html() :

This method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.

It is a crap shoot whether or not you will get what you want, and even worse to depend on every browser to do the same thing, try to find some way to use the JQuery's append function or do your template on the back-end.

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

You can just use outerHTML property:

d = document.getElementById("d");
d.outerHTML = "<p>This paragraph replaced the original div.</p>";

https://developer.mozilla.org/en-US/docs/DOM/element.outerHTML#Browser_compatibility related question: jQuery: outer html()

edited May 23 '17 at 12:01

Community

1
1

answered May 10 '13 at 22:23

Azat

3,754
2
15
13

Reigel Gallarde · Answer 3 · 2010-06-04T13:09:52.833

0

.get() and .map() will sure help you.. ;)

var checkBoxAuto = $("<input />", { 
    id: "idAuto" 
    , type : "checkbox"
    , class: "answer"
    , checked : "checked"
}); 
var checkBoxAutoText = $("<div />")
    .append(checkBoxAuto)

var    outerHtml = checkBoxAuto.map(function(){
        return $(this).parent().html();
    }).get();

alert(outerHtml);

demo

edited Jun 04 '10 at 13:09

answered Jun 04 '10 at 12:53

Reigel Gallarde

64,198
21
121
139

score -1 · Answer 4 · answered Jun 04 '10 at 13:05

Rather then try to convert the html back to a string, just keep it as DOM elements.

Thats what clone is great for:

var checkBoxAuto = $("<input />", { 
    id: "idAuto" 
    , type : "checkbox"
    , class: "answer"
    , checked : true
}); 
var checkBoxAutoDiv = $("<div />").append(checkBoxAuto);

checkBoxAutoDiv.clone().appendTo('#div1');
checkBoxAutoDiv.clone().appendTo('#div2');

How do I get outter HTML from a dynamically created checkbox w/ jQuery?

4 Answers4