I have the following javascript:
var orderItemQuantity = $('<input/>', {
    type: 'hidden',
    name: 'order_detail[][quantity]',
    value: itemQuantity
});
The above javascript throws the following error message:
Error: SyntaxError: DOM Exception 12
This one works without error:
var newListItem = $('<li/>', {
    html:
    $('#item_name_'+itemId).text() +
    '(' + $('#item_quantity_' + itemId).val() +')' +
    '<a onclick="removeItem(' + itemId + ')">Delete this</a>' +
    '<input type="hidden" name="order_detail[][item_id]" value="' + itemId + '"/>',
    id: itemId
});
I checked the following question but the answer did not specify clearly the correct reason WHY.
Here is my DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Question: Why does $('<input/>') and $('<input>') throw the said exception while $('<li/>') is not a problem?
Make sure you have jQuery loaded in your first example.
Even if you don't have jQuery loaded, the function $() is now defined by Google Chrome as something similar to querySelectorAll().
This function only accepts a CSS selector as parameter and not arbitrary HTML like jQuery's $().
From the docs:
SYNTAX_ERR code 12 In invalid or illegal string has been specified; for example setting the selectorText property of a CSSStyleRule with an invalid CSS value.
The function is expecting a CSS selector and you gave it HTML so it gave a syntax error.
See this fiddle, it works just fine:
http://jsfiddle.net/S6d6w/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With