web hosting
build a website

Ammending HTML in Javascript

Mar 27, 2013   //   by Anthony Devine   //   Website Development tips  //  Comments Off on Ammending HTML in Javascript
There are some occasions developing a Website you need the HTML to be dynamically altered and you may not have any access to the core PHP files to create an if statement to do this. One solution to this is to use Javascript as shown below.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$.noConflict();
  jQuery(document).ready(function($) {
  if ($('.currently').length > 0) {      $(".bigcategoryimages").append('<style>.bigcategoryimages{display:none;}</style>');
$(".refinedheader").append('<style>.refinedheader{display:block;}</style>');
    }    
else
 {
 $(".bigcategoryimages").append('<style>.bigcategoryimages{display:block;}</style>');
$(".refinedheader").append('<style>.refinedheader{display:none;}</style>');
    }    
  });
</script>
<div class="refinedheader"> Header to show</div>

<div class=" bigcategoryimages ">Header to hide </div>
The script example above was used on an ecommerce Website I developed and the idea of it was when a search was performed in the left hand side navigation it would hide one div on the page and display another.

I found that when something was clicked in the left hand side of the page the div class currently was being used (I found this out using Firebug) So the above code says when the class currently is being used then append the style display:block to the div class=” refinedheader” which will show that div and append the style display:none to the div class=” bigcategoryimages” which will hide that div. Then there is an else statement that says if the class currently is not being used then refinedheader is hidden and bigcategoryimages is shown.

There are other ways you can use this script, one way is to say if a certain page title is displayed then run the same script. The below example runs the script if the page name is called Homepage:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$.noConflict();
  jQuery(document).ready(function($) {
  if (document.title = "Homepage";) {      $(".bigcategoryimages").append('<style>.bigcategoryimages{display:none;}</style>');
$(".refinedheader").append('<style>.refinedheader{display:block;}</style>');
    }    
else
 {
 $(".bigcategoryimages").append('<style>.bigcategoryimages{display:block;}</style>');
$(".refinedheader").append('<style>.refinedheader{display:none;}</style>');
    }    
  });
</script>
<div class="refinedheader"> Header to show</div>

<div class=" bigcategoryimages ">Header to hide </div>
This can be a much easier option for people to use if they are not familiar to PHP or if they do not have access to the core files of a Website and it is possible to do many things to the page. A good example maybe with an ecommerce Website, if something is added to the shopping basket then change the styling or hide something on a page or show a checkout button.