We Keep Coding

Preserving attributes without value when manipulating with JQuery

The crux of my problem comes down to this issue:
$('<video allowfullscreen></video>').prop('outerHTML') === '<video allowfullscreen></video>' //Is False
$('<video allowfullscreen></video>').prop('outerHTML') === '<video allowfullscreen=""></video>' //Is True
The input I'm giving to jQuery gets partially mangled and transformed in an unwanted way.
My goal is that I have (trusted) html coming in that I want to modify by adding some attributes and wrapping it in other elements before converting it back to a String and passing it to the user as text they can copy.
So an expected output might be something like:
<div><video class="myClass" allowfullscreen></video></div>
Since the input html is coming from elsewhere I'd like to make as little assumptions about it as possible. So ideally I don't want to take the string and parse over it to fix specific attributes or remove instances of ="" (in case there's a reason at some point to specifically set a property to "").
Even if I don't care about having a value set on these properties the correct value would be allowfullscreen="allowfullscreen" anyways. I don't have control over the html coming in so I need to take it as-is. So I can't simply 'fix' the html to pass along something like allowfullscreen="allowfullscreen".
Are there any options or ways to preserve valueless properties when I go from string->jQuery->string?
I'm even open to other technology suggestions that would be better suited to this sort of DOM manipulation, but jQuery would otherwise be ideal because of how concise its syntax is. Vanilla Javascript can do it properly, but the syntax makes the code more brittle which I would like to avoid.

See HTML5 - 8.1.2.3 Attributes
8.1.2.3 Attributes
Attributes for an element are expressed inside the element's start
tag.
Attributes have a name and a value. Attribute names must consist of
one or more characters other than the space characters, U+0000 NULL,
U+0022 QUOTATION MARK ("), U+0027 APOSTROPHE ('), ">" (U+003E), "/"
(U+002F), and "=" (U+003D) characters, the control characters, and any
characters that are not defined by Unicode. In the HTML syntax,
attribute names, even those for foreign elements, may be written with
any mix of lower- and uppercase letters that are an ASCII
case-insensitive match for the attribute's name.
Attribute values are a mixture of text and character references,
except with the additional restriction that the text cannot contain an
ambiguous ampersand.
Attributes can be specified in four different ways:
Empty attribute syntax
Just the attribute name. The value is implicitly the empty string.

Must I escape strings before I set them as the value of a textarea?

In the following scenario:
var evil_string = "...";
$('#mytextarea').val(evil_string);
Do I have to escape an untrusted string before using it as the value of a textarea element?
I understand that I will have to handle the string with care if I want to do anything with it later on, but is the act of putting the string in a textarea without escaping inherently dangerous?
I have done some basic testing and the usual special characters &'"< seem to be successfully added to the textarea without interpretation.

No, you don't need to do that. When you assign directly to property of DOM element (which jQuery's .val does under the hood), the data is interpreted verbatim. You only need to quote text with methods that explicitly treat input as HTML - i.e. outer/innerHTML and like.

Putting unescaped strings as values of textboxes or textareas is fine. You only need to worry about it when you are putting strings in your HTML that could potentially be interpreted as other HTML. Generally speaking, this means you should escape the strings when the text could be a child of some HTML DOM Element. This could be done on the server (as lolka_bolka suggested), or on the client before adding the potentially dangerous string to the DOM.

How to decode html miscellaneous symbol from its glyph?

I have a div that contains a settings icon that is a html miscellaneous symbol
<span class="settings-icon">⚙</span>
I have a jasmine test that checks the div contents to makes sure that it is not changed.
it("the settings div should contain ⚙", function() {
var settingsIconDiv = $('.settings-icon');
expect(settingsIconDiv.text())
.toContain('⚙');
});
It will not pass as it is evaluated as its glyph symbol of a gear icon ⚙
How to I decode the glyph in order to pass the test?

To get actual character from Unicode to compare it to a literal in HTML you can use String.fromCharCode() e.g.
.toContain(String.fromCharCode(9881))

You should check against the string '⚙' or, if you do not how to enter it in your code, the escape notation \u2699. There are other, clumsier ways to construct a string containing the character, but simplicity is best.
No matter how the character is written in HTML source code (e.g., as the reference ⚙), it appears in the DOM as the character itself, U+2699. In JavaScript, a string like ⚙ is just a sequence of seven Ascii characters (though you can pass it to a function that parses it as an HTML character reference, or you can assign it e.g. to the innerHTML property, causing HTML parsing, but this is rather pointless and confusing).

To match the browser behavior (because you don't know how it is encoded in html or in text) i would try the following
.toContain($("<span>⚙</span>").text()) instead of .toContain('⚙').
That way it should match how it is stored in the dom.
The String.fromCharCode(9881); mentioned by Yuriy Galanter will definitely also work reliable. But because dom engine and the js engine are two different parts, that could behave differently, i would test with both techniques.

How can I pass a tag`s value to a javascript function after an event?

How can I pass a tag`s value to a javascript function?
this works:
onclick="submit(this.value)"
but this dosnt work:
onclick="submit(document.getElementById("ShortcutID").value)"

If you want to include quote characters in an attribute value delimited with the same kind of quote characters, you have to represent them with character references.
onclick="submit(document.getElementById("ShortcutID").value)"
Alternatively, use a different kind of quote character.
onclick="submit(document.getElementById('ShortcutID').value)"
… but try to avoid using intrinsic event attributes and bind your JavaScript event handlers with JavaScript instead. See Unobtrusive JavaScript

there is syntax error.
ShortcutID should be enclosed in this 'ShortcutID'
Change this
onclick="submit(document.getElementById("ShortcutID").value)"
to this
onclick="submit(document.getElementById('ShortcutID').value)"

but this dosnt work: onclick="submit(document.getElementById("ShortcutID").value)"
Because you're using double quotes both to delimit the onclick attribute and also inside to delimit the JavaScript string. Try:
onclick="submit(document.getElementById('ShortcutID').value)"
This is why JavaScript allows both single and double quotes for quoting strings.
You can also do it with entities, because remember that the content of an attribute is HTML text just like anything else in the HTML, so:
onclick="submit(document.getElementById("ShortcutID").value)"
The fact that the content is HTML text tends to be problematic when you're doing something non-trivial, which is one reason not to use onclick="code" style event handling but rather hooking up the event in code instead.

The problem you have in your code is you are using two sets of double quotes. To fix this, try this: onclick="submit(document.getElementById('ShortcutID').value)"

Do browsers widely support numeric quotes in attributes?

There exist other ways of linking to JS, apart from this (the usual)..
<script src="myscript.js" type="text/javascript"></script>
...that utilize other quote types:
<script src="myscript.js" type="text/javascript"></script>
Are these widely supported in modern browsers, and older browsers in use, such as IE6? Basically is it safe to use this method, just as you would use the regular double-quote method?
Edit: The HTML4 spec seems to allow it, but is it well supported in practical reality?
3.2.2 Attributes
Authors may also use numeric character references to represent
double quotes (") and single quotes (').
For double quotes authors can also use the
character entity reference ".

Using " instead of " is simply wrong, it doesn't have the same meaning within the SGML and XML specifications. Argument values of elements should use either single (') or double quotes ("). In the old SGML specification this element
<foo bar="quux" />
could be read as an element with the name foo, and attribute named bar with the value "quux". However, the standard defines that unquoted attribute values should not include escaped characters. And this element
<foo bar="quux" />
should be read as an element with the name foo, and attribute named bar with the value quux without the quotes. This is because in SGML the quotes are optional, and everything up to the next space will be used as the value for the attribute.
XML requires quotes.

There is a difference between an attribute value delimiter and a quote or double quote character.
You have to use a literal " or ' to delimit attribute values (except where delimiters are optional). In this case, the squence of bytes means "attribute value delimited" not "(double) quote mark"
The character references can be used to represent a (double) quote mark but is a more complicated and inefficient way compared to using a literal so should only be used when the literal is not available (i.e. when it would be an attribute value delimiter because you are inside an an attribute value where the opening delimiter was that character).

Just out of curiosity. Why would you want to use the encoded variants? In most of the text editors it will break the formatting. For me that would be very annoying.

You should stick with the double quotes - othewise the attribute might not be correctly read.

<script src=myscript.js></script>
is valid in HTML5 and supported by every significant browser.