Develop Reference

Avoid jquery append closing tag

How can I ensure that this:
$('.graph svg').append('<polyline points="' + '3,' +point+ ' 97,' +point+ '"style="fill:none;stroke:#FFFFFF;stroke-width:0.5"/>');
Actually results in a self closing tag ..../>
Rather than closing with </polyline>
For some reason only the former renders on iOS.

It doesn't result in any tags at all; it results in elements in the DOM. Tags are textual means of describing elements. When you give that string to jQuery, it asks the browser to parse that string and create elements (objects) in memory. The only tags involved are the ones you give to jQuery.
From your update (comment):
...is there another way of doing this that avoids the append method? Here's a fiddle that refuses to work on iOS http://jsfiddle.net/rCfrF/23
That doesn't work for me on Chrome, Firefox, or IE either. I don't think you can add to SVG elements like that, I think jQuery tries to create an HTML element polyline rather than the SVG polyline (which is namespaced).
This works on Chrome, Firefox, IE, and my iPhone 5: Updated version of your fiddle on JSBin (jsFiddle doesn't work properly on my iPhone 5)
function clickappend() {
var svg = $("#graph svg")[0];
var polyline = svg.ownerDocument.createElementNS('http://www.w3.org/2000/svg', 'polyline');
polyline.setAttribute("points", "20,0 20,100");
polyline.style.fill = "none";
polyline.style.stroke = "#232323";
polyline.style.strokeWidth = "0.5";
svg.appendChild(polyline);
alert('ran');
}

You could use:
$('.graph svg').html($('.graph svg').html() + '<polyline points="' + '3,' +point+ ' 97,' +point+ '"style="fill:none;stroke:#FFFFFF;stroke-width:0.5"/>');

This is the inspector's problem. There is a substantial difference between void elements (aka self-closing elements) and others, in that they cannot accept descendant nodes. polyline is such a void element. The inspector may show it as having a closing tag, but it shouldn't be able to accept methods such as – if you tried to insert content between its opening and closing tags that content would likely be inserted after it in the DOM.

IE10 inserting blank text DOM entries

I have a piece of Javascript code that locates the single table in the DOM then tries to manipulate its first child, the thead (actually, it iterates though the children of that child, the tr entries but that's not important to the question). The code to do this is:
var tableNode = document.getElementById("table").firstChild;
This works fine in Firefox ESR (10/17/24) and IE9 but fails in IE10, and the reason appears to be because IE10 is inserting weird DOM entries and it's one of those I'm picking up with firstChild instead of the desired thead. I base this on the DOM dump below along with the fact that tableNode.data is set to the string type.
The DOM in IE10 compatibility mode (where it also works) looks like this:
and you can see that the DOM indeed looks sensible. However, examining the DOM in normal IE10 mode shows this:
For what it's worth, Chrome gives me:
and FF17esr gives me:
neither of which seem to have the empty text elements.
Now, I can run the site in compatibility mode but that's an annoying thing to have to tell all our customers. I can also apparently add the hideous:
<meta http-equiv="X-UA-Compatible" content="IE=9">
to my output but I'm not entirely certain what other effects that may have.
I'd like to understand first why IE10 is adding these nodes whereas IE9/FF/IE10compat aren't. There are some discussions I've found stating that whitespace in the HTML may be causing it but it seems to me that this shouldn't result in random nodes being created and, in any case, I don't think I have any superfluous white space. Although I should mention that the value of tableNode.data mentioned above as type string is actually \n, meaning that the newline at the end of the line may be creating this DOM entry.
But, to be honest, that seems ludicrous. HTML is supposed to ignore whitespace outside of tags as far as I'm aware, or at least fold it into a single element. I find it hard to believe that something like:
<tag>line 1</tag>
<tag>line 2</tag>
would result in three DOM entries, tag, empty node and tag just because there's a newline between them.
Any ideas on how to best solve this? Am I going to have to modify my Javascript code to skip these DOM entries?

You can never know where a browser might insert text nodes so you have to make sure you're getting the first child "element"in case the browser put a text node there.
Here's a simple function that will do that:
getFirstChildElement(parent) {
var node = parent.firstChild;
// advance until we get to an element node (skipping text and comment nodes)
while (node && node.nodeType !== 1) {
node = node.nextSibling;
}
return node;
}
Or, if you just want to get the <thead> element, you can simply use this:
table.getElementsByTagName("thead")[0]

Are you absolutely sure Firefox doesn't show those empty text nodes? I'm asking because it should, if it doesn't then it's a bug in Firefox.
Previously only IE behaved the way you expected. All other browsers including Firefox, Chrome, Safari and Opera followed W3C DOM standards which requires them to retain those whitespace. IE10 now join the ranks of other web browsers and behave in a standards compliant way.
You'd be right to complain that this doesn't make sense but it's what the standards require.
As such, the correct way to get the element is to check it's tagName:
var table = document.getElementById("table");
var child = table.firstChild;
while (child && child.tagName != 'thread') {
child = child.nextSibling;
}
// remember to check child after this point because it may be undefined
Additional explanation
Firebug and Chrome's DOM explorer hides those text elements as a matter of convenience, but it's still there. You can try this out:
<html>
<body>
<div id="foo">
<div id="bar">
</div>
</div>
<script>
var f = document.getElementById('foo');
document.body.innerHTML += f.firstChild.id + <br>;
document.body.innerHTML += f.firstChild.nextSibling.id + <br>;
</script>
</body>
</html>
In all browsers except older versions of IE the above page would output:
undefined
bar
That's because the firstChild is the empty text node. You can console.log it if you like to check out that firstChild.

Are HTML allowed inside HTML attributes?

For example, lets say you have something like this:
<div data-object="{'str': '<h1>This is a nice headline</h1>'}"></div>
Is this allowed in HTML5 and will it render properly in all browsers?
Edit:
With properly I mean that the browser will ignore and NOT render the H1 in any way ;)

Yes, it's allowed as long as it's quoted correctly.
Will it render? The H1 element? No - because it's not an element, it's just a bit of text inside an attribute of the div element.

Yes, browsers won't render any HTML tags inside attributes. This is pretty much common when you want to move the element later so it would show up. The only problem is that this is not a way to go as this does not create an element in DOM, thus, it will be much slower.
Try to find a way or ask for an alternative/better way to reuse the element which is hidden when the page is loaded.

Yes it's allowed and possible, but to make it work you have to make it valid JSON by using double quotes:
<div data-object='{"str": "<h1>This is a nice headline</h1>"}'></div>
Now to parse it just have: (jQuery will parse it to JSON all by itself)
var element = $("div").eq(0);
var rawData = element.data("object");
var rawHTML = rawData["str"];
$(rawHTML).appendTo("body");
Live test case.

New line charactor in ie

I have the following html
<label>Hello\r\nUsername</label>
<textarea></textarea>
After page load i want to set the content of the label to textarea
normally
$("textarea").val($("label").html()); // or may be $("label").text();
will set the content to the textarea including new lines.It works fine in FF,But not in IE.
It looke like IE is losing the new line info.
How can i solve this ? Please help me.

After a small search on Google I found out that it isn't possible in IE with a version less then 9 since its a built in problem. Check web.student.tuwien.ac.at/~e0226430/innerHtmlQuirk.html for reference. In all, IE<9 removes all white-space in any DOM element except pre and textarea.

innerHTML not working as expected

I have searched everywhere for a solution to this problem which I cannot explain.
here is the problem, whenever I use javascript's innerHTML to inject the following string:
example:
var s = "<div><p><div><p></p></div></p></div>"
document.getElementById("id").innerHTML = s;
In Firefox, using firebug, I look at the latest markup and see <div><p></p><div><p></p></div></div>
Anyone know what this occurs?

You cannot nest p or div inside another p. Closing the p is how the browser attempts to make your invalid HTML valid.