Search code examples
javascripthtmlmeta-tags

Change meta tag content dynamically through javascript


I want to change the meta tag content i.e. refresh rate and url dynamically using javascript. Using a button to enable javascript function. Tried 3 alternatives but not working. Please help.

Thanks,Amresh

<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="refresh" name="description" id="mymetatag"
      content="5;URL=http://localhost:6985/ChartJSDemo/Is_Mainpage.html">
<meta charset="ISO-8859-1">

<title>Processing Details</title>
<link rel="stylesheet" type="text/css" href="css/MF_job_failTable.css">
</head>

<body>

<button onclick="myFunction()">Click me</button>

<script>
function myFunction() {
    <!--document.querySelector('meta[name="description"]').setAttribute("content","5;URL=http://google.co.in");-->
    <!--document.getElementById("mymetatag").setAttribute("content", "5;URL=http://google.co.in");-->

  var m = document.createElement('meta'); 
  m.name = 'description'; 
  m.id = 'mymetatag';
  m.content = '5;URL=http://google.co.in'; 
  m.HTTP-EQUIV= 'refresh';
  document.head.appendChild(m);
}
</script>

Solution

  • This works for me. The issue could have been that you tried a first code which did not work and you commented the code with HTML comments <!-- [...] -->instead of Javascript comments: // [...] or /** [...] */.

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta HTTP-EQUIV="refresh" name="description" id="mymetatag" content="5;URL=http://localhost:6985/ChartJSDemo/Is_Mainpage.html">
      <meta charset="ISO-8859-1">
    
      <title>Processing Details</title>
      <link rel="stylesheet" type="text/css" href="css/MF_job_failTable.css">
    </head>
    
    <body>
    
      <button onclick="myFunction()">Click me</button>
    
      <script>
        function myFunction() {
          document.getElementById("mymetatag").setAttribute("content", "5;URL=http://google.co.in");
        }
      </script>
    </body>
    </html>