What Happens If the Meta Tags Are Present in the Document Body

What happens if the meta tags are present in the document body?

This is of course invalid as per HTML4.01. META tags are only allowed within HEAD (just like, say, TITLE) so by putting it into a BODY, you're essentially creating an invalid markup.

From the cursory tests, it seems that some browsers (e.g. Firefox 3.5 and Safari 4) actually put these elements into HEAD when creating a document tree. This is not very surprising: browsers are known to tolerate and try to interpret all kinds of broken markup.

Having invalid markup is rarely a good idea. Non-standard handling by browsers might lead to various hard-to-pin rendering (and behavioral) inconsistencies. Instead of relying on browser guessing, it's best to follow a standard.

I don't know how search engines react to such tag soup, but I wouldn't risk experimenting to find out :) Perhaps they only parse HEAD tag for certain information and will skip your BODY-contained tags altogether. Or maybe they consider these to be some malicious gambling attempts and black-list pages containing such markup. Who knows.

The bottom line — avoid this whenever possible.

HTML metadata in body

Go through: http://www.w3.org/tr/html401/struct/global.html for better understanding on HTML structure.

Still you can add meta information to your tags by using an additional hidden tag.
Example:

http://jsfiddle.net/w49g19bw/

<p data-meta="HN SPECS" class="hidden"></p> 

.hidden {
    display:none;
}

Inject a meta tag from a document's body?

Maybe you can try this:

jQuery:

$('head').append('<meta name="apple-itunes-app" content="app-id=xxxxx">');

Javascript:

document.getElementsByTagName('head')[0].appendChild('<meta name="apple-itunes-app" content="app-id=xxxxx">');

Meta Tag in Body

The <meta>-tag is part of the 4.2 Document metadata. Therefor it can only appear in the <head>-section of a document. Your solution using a <span> or a <div> or even a list for multiple errors is just fine for your purpose.

Meta tags in body (for Javascript)

The <meta> element is only valid in the <head> of an HTML5 document (Metadata content model is only acceptable in the <head>). What you should be using for an HTML5 jQuery plugin to pass configuration data is to use data-* attributes which can be accessed from jQuery using .data().

So your markup could be:

<div class="widget" data-foo="bar"><div>

And your jQuery would be:

$('.widget').widget({...options...});

Which would be a function that uses:

$.fn.widget = function (...) {
    return this.each(function () {
        ...code...
        options.foo = $(this).data('foo'); //gets the value 'bar'
        ...more code...
    });
};

In reply to OPs comment:

There's no limit to how many data-* attributes you use, if it's simply for formatting, split them on multiple lines. White space is condensed in HTML:

<div class="widget"
    data-foo="bar"
    data-fizz="buzz"
    data-lorem="ipsum"
    ...
    data-xyz="abc">
    ...contents...
</div>

If you have a good reason to keep the data separate from the <div> you could use an <input> field with type="hidden" I typically use this when I have an interactive form widget that needs to be submitted with a form.

What happens if I change meta tags after the DOM has materialized?

is there any guarantee in the specs that browsers should respect meta tag mutations?

They are DOM elements, like any other.

The specs won't mention anything specific because they aren't special cases.

are there known issues with getting a browser to recognise meta tag changes after <head> parsing / DOM materialisation?

Not from the POV of examining them in the DOM afterwards.

How do I get the information from a meta tag with JavaScript?

You can use this:

function getMeta(metaName) {
  const metas = document.getElementsByTagName('meta');

  for (let i = 0; i < metas.length; i++) {
    if (metas[i].getAttribute('name') === metaName) {
      return metas[i].getAttribute('content');
    }
  }

  return '';
}

console.log(getMeta('video'));

What Happens If the Meta Tags Are Present in the Document Body