Using Javascript to edit HTML elements created by a content management system

Question

Our small business signed a year long contract with Web.com to design and host a website, as well as make unlimited changes for the duration of the year. Unfortunately their content management system is extremely limiting, and their "experts" have little to no actual technical knowledge. Right now we're trying to add a page (Promotions) to the navigation bar, but the CMS does not allow us to edit it, the web.com design staff says they cannot access it for fear that they might break it, and they refuse to give us any kind of direct access to the files, so I cannot make the changes myself.

For reference, the website is www.icfloors.com

You can see if you inspect the navigation bar that it's serving up content for the promotions page, but it's set to not display

<li class="primary-webcomMenuItem" style="height: 72px; text-indent: 0px; display: none;">
 <a href="promotions.html">
  <div class="primary-webcomMenuItem-bottom" style="height: 72px;">
   <div class="primary-webcomMenuItem-top" style="height: 72px;">
    <div class="primary-webcomMenuItem-right" style="height: 72px;">
     <div class="primary-webcomMenuItem-left" style="height: 72px;">
      <div class="primary-webcomMenuItem-middle" style="padding-top: 25.5px; padding-bottom: 25.5px; height: 72px;">
       Promotions
      </div>
     </div>
    </div>
   </div>
  </div>
 </a>
</li>

If you change the display attribute to "display: block;" as I do below, then the link appears exactly as intended and everything looks great.

<li class="primary-webcomMenuItem" style="height: 72px; text-indent: 0px; display: block;">

We've been on the phone with their designers, customer service, and/or tech support for hours and everyone is either incapable or unwilling to fix the issue/give us access to the actual code. We are however, able to directly edit the html of text boxes. So at this point, my hope is that I can write a short script in one of the boxes lower on the page that will go back and make the necessary change to the display attribute on the user's end. Unfortunately I have no ability to add a name or id to the element, so I have no idea how to find or address it.

Is there any way for me to do this?

Answer 1

If the href of that anchor tag can be relied on to be unique and consistent you can start there then go up one level and edit the display of its parent.

$('a[href="promotions.html"]').parent().css('display', 'block');

If you do not have access to jQuery, the process is a little more involved:

var element = getElementByHref('promotions.html');
if(element) element.parentElement.style.display = "block";

function getElementByHref(href) {
    var anchors = document.getElementsByTagName("a");
    for (var i = 0;i < anchors.length; i++) {
        if (anchors[i].getAttribute("href") === href) return anchors[i];
    }
}

Answer 2

Yes, it's possible. Using JQuery (that's what the $ he has means) as the other answer has posted, it would be a little easier, but here is the code without raw JS, because it doesn't seem like you have JQuery loaded on your site.

--Edited response to account for HREF and LI parent...

ADD at the bottom :

 <script>
  document.querySelector("[href='promotions.html']").parentNode.style.display = "block";
 </script>

This may also help... How to get all elements with a specified href attribute

Then just get down to .style.display.