How can I add code to the head element when posting a code snippet?

Question

I wanted to post a code snippet with a meta tag in the document head, so I created a code snippet with a complete HTML document.

Later I saw that Stack Overflow automatically creates an HTML document and my code was put inside that.

Here is an example:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width" />
    </head>
    <body>
        Test!
    </body>
</html>

If you run the code and look inside the source code of the iframe you can see it's rubbish. There are two HTML documents now.

So how can I do it properly?

Use a blank iframe and write all the content including scripts into the iframe. — randomuser5215
– randomuser5215, Commented Apr 7, 2019 at 11:31

Peter Mortensen · Accepted Answer · 2022-11-24 15:18:51Z

If dynamically creating the <meta> tag isn't enough, there's a way to put the tag in directly, without JavaScript, through a hack. The text in the CodeMirror textareas will be inserted verbatim into the base HTML markup. For example:

// JavaScript code goes here

/* CSS goes here */

<!-- HTML goes here -->

Right click and Inspect me

Results in:

<!DOCTYPE html>
<html>
<head>
    <style>
        /* CSS goes here */
    </style>
    </head>
<body>
    <!-- HTML goes here -->

Right click and Inspect me
    <script type="text/javascript">
        // JavaScript code goes here
    </script>
</body>
</html>

So, if you put </style> in the CSS section, you'll be in the <head> proper, and you can change it to your heart's content (make sure to start up the <style> again right before the end so that the HTML is valid.) For example:

</style>
<meta name="viewport" content="width=device-width" />
<style>

results in

<!DOCTYPE html>
<html>
<head>
    <style>
        </style>
<meta name="viewport" content="width=device-width" />
<style>
    </style>
    </head>
<body>

    <script type="text/javascript">

    </script>
</body>
</html>

This is hideous. People, don't use this. Just write a normal code block instead of a snippet. The extra 10 seconds required for the reader to save your code into a file and then open it in a browser is less than it'll take for them to understand this hack. We got on fine without snippets for years before they got added; a front-end web question not having a snippet is seriously not going to kill anyone. — Mark Amery
– Mark Amery, Commented Apr 9, 2019 at 10:49

rene · Accepted Answer · 2019-04-06 20:47:54Z

9

You can add that Meta tag via JavaScript but I'm not sure if that will help for whatever you're trying to fix or demonstrate.

var head = document.getElementsByTagName('head')[0];
var meta = document.createElement('meta');
meta.setAttribute('name',"viewport");
meta.setAttribute('content',"width=device-width");
head.appendChild(meta);

Test!

Here is what you get in the Developer Console of Chrome when you run the snippet:

edited Apr 6, 2019 at 20:47

answered Apr 6, 2019 at 19:55

rene

42.6k55 gold badges615 silver badges781 bronze badges

Add a comment |

How can I add code to the head element when posting a code snippet?

2 Answers 2

You must log in to answer this question.

Linked

Hot Network Questions

2 Answers 2

You must log in to answer this question.

Linked

Related