We Keep Coding

JavaScript DIV Editing Destroys Functionality of Other Elements

So my website is built using a company's software called Inksoft which leaves me very little to work in the way of customization. So I have to do many workarounds.
Here is my site's homepage.
The header on top of the page only has two links right now. "Products" and "Design Studio". My goal is to add an "About Us" link and "Buyers Guide" to the header as well.
I cannot add new content to the header using Inksoft's backend. So I coded a workaround to replace the content of existing DIV's within the header to say and link to where I want them to go.
The only issue is, the responsive mobile-nav loses functionality when this is implemented. As seen here on this test page.
The test page has the About Us in the top header, added by the use of this code:
<script>
$("#header-nav-designs").html('<document.write="<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
So, the simplified question is: how do I implement this code without losing the responsive functionality of the nav bar?

The jQuery .html function will replace the HTML inside the target element. If you want to just append the one value, you likely want to .append to the element.
In addition, you aren't setting the HTML to a valid html string. You probably just want to get rid of the <document.write=" at the beginning of the string. The rest of it looks fine with just a cursory glance.
So:
<script>
$("#header-nav-designs").append('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
Edit:
After looking at it a little more, it appears as though the $('#header-nav-designs') that you are selecting is already an <li> which means you need to either select the parent <ul> list or you can use the jquery .after function instead.
<script>
$("#header-nav-designs").after('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
And as someone else commented above, you are getting an error on the page. It appears as though you are trying to get an element with the id divID and the appending some html to it, but there is no element with the id divID and so you are getting an error saying that you can't read the property innerHTML of null as the call to document.getElementById is returning null (element not found).

Element id header-nav-designs witch your code is referring have CSS style on line 170:
#header-nav-designs {display:none;}
The element will be hidden, and the page will be displayed as if the element is not there. With display:none;
If I understand you correctly your code selector points to wrong element id. It should point $(".header-nav > ul"). Document.write is not needed inside jQuery you need to give only an valid html string as argument.
jQuery html function erase html that is all ready inside element and replace it with html string given as argument. You have to use append if you want to add more html but not remove what is allready in element.
$(".header-nav > ul").append('<li><font color="#000000">About Us</font></li>');
$(".header-nav > ul").append('<li><font color="#000000">Buyers Guide</font></li>');

Replacing HTML text with javascript

I am trying to replace some html text from some code with some new text using javascript and I have learned about Javascript HTML DOM which I believe is the way to do this; however, whenever write a method, nothing seems to change.
This is a line I am interested in changing. I want to change "Text here" to "Hello World!".
Text here
This the code I used
<script> document.getElementById("login_or_create_user_modal").innerHTML = "Hello World!"; </script>
My first concern is I have noticed that it is a data-reveal-id which is not the same as the usual id, is there a better method to use in this case? I couldn't find anything relating to data-reveal-id.
The other thing I am trying to change is to change the text cart to "Hello World!'. Again, the method I used does not do anything.
<script> document.getElementById("shopping_cart_btn").innerHTML = "Hello World!"; </script>
Am I using the right ID or am I just completely in the wrong path here?
Thanks :)

for document.getElementById() to work, you need an id attribute set, try:
Text here

change your "data-reveal-id" to just "id" and it should work

You're on the wrong path but you were heading the right direction. You just need to hop tracks and climb onto the document.querySelector() train, leaving document.getElementById behind for now.
getElementById will return an element whose id attribute equals the provided value; it won't look at any other attributes, like data-reveal-id.
querySelector instead uses CSS selectors to select an element. For examples of CSS selectors, refer the W3C documentation here: http://www.w3.org/TR/selectors/#selectors
You would use this like so:
document.querySelector("[data-reveal-id='shopping_cart_btn']").innerHTML = "Hello World!";
document.querySelector("[data-reveal-id='shopping_cart_btn']") is saying "get me the first element you can find whose data-reveal-id attribute is equal to shopping_cart_btn.
Here's a working example to prove I'm not crazy. When the JavaScript runs, it selects the div by its data-reveal-id attribute, then replaces its inner HTML:
document.querySelector("[data-reveal-id='something_random']").innerHTML = "New Text";
<div data-reveal-id="something_random">Original Text</div>

Javascript to fill a formatted text field on a web site

I know virtually nothing about Javascript. By a monkey-see, monkey-do approach I’ve managed to successfully use Javascript within AppleScript/Safari to fill text fields on a web-site using the following command:
do JavaScript "document.getElementById('ElementID').value ='TextToEnter';" in document 1
I’ve been able to enter text into all fields except one. The fields that work are labeled as input type="text”. The field that doesn’t work is complex in that the entered text can be formatted (bold, italics, underline, alignment, etc.) after entry. Assuming I’ve identified the correct source code for this element it looks as follows PRIOR TO any text entry:
<body id="tinymce" class="mce-content-body " onload="window.parent.tinymce.get('fax_text').fire('load');" contenteditable="true" spellcheck="false"><p><br data-mce-bogus="1"></p></body>
Depending on how its viewed, sometimes the p and br tags appear on separate lines but everything is otherwise identical.
After manual entry of text (“INSERT TEXT HERE”) directly into the web page's text field the source code becomes:
<body id="tinymce" class="mce-content-body " onload="window.parent.tinymce.get('fax_text').fire('load');" contenteditable="true" spellcheck="false"><p>INSERT TEXT HERE</p></body>
The following did not work (wrapped in Applescript):
document.getElementById('tinymce').value ='INSERT TEXT HERE';
It produces the error: "missing value".
As per #WhiteHat, the following with n= 0-4 inserted text at several spots on the page but not in the targeted text field; n > 4 resulted in the "missing value" error:
document.getElementsByTagName('p')[n].innerHTML ='Insert text here';
I tried targeting the br tag but to no avail. How do I target this text field with Javascript? Note: I do not need to format the entered text.

You need to access the <p> element, which is just after the body of the document, as such...
document.getElementsByTagName('P')[0].innerHTML = 'your text'
The getElementsByTagName function returns an array of all elements with the tag name you provide, P in this case. You're looking for the first one, hence the [0].
The innerHTML property will allow you to set the contents of the <p> element.
Following is a good JavaScript reference...
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
The following reference is for the web page, or Document Object Model (DOM).
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
And tinymce is a 3rd party JavaScript library which allows the rich edit functionality.
http://www.tinymce.com/
Based on the comments, the specific field you are looking for is named fax_text. Here is the source, it's in a textarea tag, take note on which function to use TagName vs. Name...
document.getElementsByName('fax_text')[0].value = 'This is my text!';
document.getElementsByTagName('textarea')[0].value =
document.getElementsByName('fax_text')[0].value +
'\nThis is additional text...';
<textarea rows="5" name="fax_text" cols="36" class="mytext"></textarea>

This text field is in an iFrame.
This iFrame contains an HTML document (<html><head><body>).
To get this document, you need the_iFrame.contentDocument.
do JavaScript "var ifr = document.getElementById('fax_text_ifr'); ifr.contentDocument.getElementsByTagName('p')[0].innerHTML = 'some text';" in document 1

How to access text in all instances of a certainclass with a span inside of it?

I have a rate box on my site that appears beneath an article, and then again that same rate box appears on comments people leave regarding the article. So the rate box appears multiple times on the page. I'm trying to change the text that appears within that rate box, but infortunately I don't have server access on the type of site I have. So I need to do it with scripting.
The small script I'm using now works, but it's only working for the very first rate box. I need to change the text in each of them however. I'm trying to change the existing text that says "Rate" into "Like".
.SUI-RateBox is the div class, and the text I need to change sits in a span within that class.
The code that I have that works on just the first instance is this:
<script>
$(".SUI-RateBox span:contains('Rate')").html("Like");
</script>
How can I make this happen, but to all of the rate boxes.
The dom structure is at the below link.
http://www.spruzstuff.spruz.com/pt/Element-Background-Image/wiki.htm

I'm not sure why you're using # (nevermind, you changed your question's details), but try this:
<script>
$(".SUI-RateBox").find("span:contains('Rate')").html("Like");
</script>
http://jsfiddle.net/EhPP7/

Alternatively, I guess you could also try .each() to iterate through each of span tags within div.SUI-RateBox and check text value one after another.
$(document).ready(function () {
$("*.SUI-RateBox").each(function(){
var sp = $(this).children("span");
if(sp.text() == 'Rate')
sp.text('like');
});
});
​
http://jsfiddle.net/cZMFC/1/
Also check out jQuery .each() API

What does innerHTML do in javascript?

Can anyone tell me what innerHTML does in javascript and give me example how I can use it?

The innerHTML property is used to get or set the HTML content of an element node.
Example: http://jsfiddle.net/mQMVc/
// get the element with the "someElement" id, and give it new content
document.getElementById('someElement').innerHTML = "<p>new content</p>";
// retrieve the content from an element
var content = document.getElementById('someElement').innerHTML;
alert( content );

The innerHTML property is part of the Document Object Model (DOM) that allows Javascript code to manipulate a website being displayed. Specifically, it allows reading and replacing everything within a given DOM element (HTML tag).
However, DOM manipulations using innerHTML are slower and more failure-prone than manipulations based on individual DOM objects.

innerHTML is a property of every element. It tells you what is between the starting and ending tags of the element, and it also let you sets the content of the element.
property describes an aspect of an object. It is something an object has as opposed to something an object does.
<p id="myParagraph">
This is my paragraph.
</p>
You can select the paragraph and then change the value of it's innerHTML with the following command:
document.getElementById("myParagraph").innerHTML = "This is my paragraph";

For understanding innerHTML property you first need to go through the basics of the javascript object and HTML DOM(Document object model). I will try to explain:
JavaScript objects consist of properties and methods.
for rendering HTML document web browser creates a DOM, in DOM every HTML element is treated as a JavaScript Object which has a set of properties and methods associated with it.
Now coming to your Question:
HTML code:
<p id= "myPara"> We love to Code.</p>
JavaScript code:
alert(document.getElementById("myPara").innerHTML);
here, document.getElementById("myPara") will return our html element as a javascript object which has pre-defined property innerHTML.
innerHTML property contains the content of HTML tag.
Hope this will help.
You can run following HTML code in your browser to understand it:
<html>
<body>
<p id= "myPara"> We love to Code.</p>
<script>
alert(document.getElementById("myPara").innerHTML);
</script>
</body>
</html>

Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. By changing an element's innerHTML after some user interaction, you can make much more interactive pages.
However, using innerHTML requires some preparation if you want to be able to use it easily and reliably. First, you must give the element you wish to change an id. With that id in place you will be able to use the getElementById function, which works on all browsers.

You can collect or set the content of a selected tag.
As a Pseudo idea, its similar to having many boxes within a room and imply the idea 'everything within that box'

The innerHTML fetches content depending on the id/name and replaces them.
<!DOCTYPE html>
<html>
<head>
<title>Learn JavaScript</title>
</head>
<body>
<button type = "button"
onclick="document.getElementById('demo').innerHTML = Date()"> <!--fetches the content with id demo and changes the innerHTML content to Date()-->
Click for date
</button>
<h3 id = 'demo'>Before Button is clicked this content will be Displayed the inner content of h3 tag with id demo and once you click the button this will be replaced by the Date() ,which prints the current date and time </h3>
</body>
</html>
When you click the button,the content in h3 will be replaced by innerHTML assignent i.e Date() .

innerHTML explanation with example:
The innerHTML manipulates the HTML content of an element(get or set). In the example below if you click on the Change Content link it's value will be updated by using innerHTML property of anchor link Change Content
Example:
<a id="example" onclick='testFunction()'>Change Content</a>
<script>
function testFunction(){
// change the content using innerHTML
document.getElementById("example").innerHTML = "This is dummy content";
// get the content using innerHTML
alert(document.getElementById("example").innerHTML)
}
</script>

Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. By changing an element's innerHTML after some user interaction, you can make much more interactive pages.
However, using innerHTML requires some preparation if you want to be able to use it easily and reliably. First, you must give the element you wish to change an id. With that id in place you will be able to use the getElementById function, which works on all browsers.
After you have that set up you can now manipulate the text of an element. To start off, let's try changing the text inside a bold tag.
JavaScript Code:
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
This answer is from here

It represents the textual contents of a given HTML tag. Can also contain tags of its own.

It does literally what it says - it returns the inner content of the specified HTML element. The most minimal self contained demonstration is shown below:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
alert(document.getElementById("myElement").innerHTML);
</script>
<div id="myElement">
Hello, world!
</div>
</body>
</html>
Running the javascript code within the tag will popup a notification saying
"Hello, world!"