document.createElement don't work

Question

I try to create element using this code:

document.createElement("<input type='radio' name='radio1' value='First Choice' />")

Get it from this: http://msdn.microsoft.com/ru-ru/library/windows/apps/hh465797.aspx (second example)

But i see error: InvalidCharacterError

If i do this

document.createElement('a')

or this

document.createElement('div')

it works fine.

How to make first code work?

Answer 1

That's not supported.

do:
var x = document.createElement("input");
x.setAttribute('type', 'radio');
x.setAttribute('name', 'radio1');
x.setAttribute('value', 'First Choice');

or: 
var x = document.createElement("input");
x.type = 'radio';
x.name = 'radio1';
x.value = 'First Choice';

or:
var tempEl = document.createElement('div');
tempEl.innerHTML = '<input type="radio" name="radio1" value="First Choice" />';
var x = tempEl.firstChild;

Answer 2

Thanks, I already use third.

I just want to use jQuery style, like this - $('<div id="" class=""></div>')

But it means that documentation is not correct.

Answer 3

Hi format-soft,

I think the code snippet in the msdn reference you mentioned does be incorrect. The standard javascript document.createElement doesn't support JQuery like syntax and we need to create the element first and then add attributes and innerHTML content into it(or append other child elements). The WinJS.Utility namespace provide some useful helper functions for query and manipulate html elements in Windows Store javascript application.

Also, you can still reference jquery script code in your windows store javascript app and use it to help you generating UI or query html elements (although some of the features is blocked due to the windows store html/js restriction). For example, you can use $("") to create the element first and convert it to standard DOM element before using it with other WinJS code:

var elm = $("<div style='width:200px;height:100px;border-style:solid;border-width:1pt' > <button>Click Me!</button></div>");
document.getElementById("jqPanel").appendChild(elm[0]);

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.