We Keep Coding

appendChild method not working

Actually, it seems to work in JSFiddle without much problem.
https://jsfiddle.net/3zjqwbgy/5/
However, when I try to run it locally using Notepad++, I get the following error:
Cannot read property 'appendChild' of null
What could be the reason for this? How can I make it work locally?

Make sure you have the HTML available when you run the appendChild method.
That means you'll wrap everything into an load handler:
window.addEventListener("load", function () {
/* your actual code */
...
showElmntProperty("myDeck", "cardName", "first");
});
It's working in JSFiddle because JSFiddle is doing that for you automagically (by default)–you can change it, though:

Since your code works on JSFiddle, the only thing I can think of off the top of my head is you've misplaced your <script></script> tags. Try moving them down below the Table, so that they can be "seen" by JavaScript.

Whenever you get a "Cannot read property "some property name" of null, it simply means that the object that you are calling the method on doesn't actually refer to the object you think it is - it's not pointing to any object at all.
Now, in your code, you didn't say where (exactly) you are getting the error, but take these two lines:
node.appendChild(textnode);
document.getElementById(id).appendChild(node);
If you are getting the error on the first line, then the node variable does not, in fact, refer to anything. If it's the second line you are getting the error on, then document.getElementById(id) isn't returning an actual object, in which case, you'd need to check to see that the id variable you are using there actually matches an id of an HTML element.
And, of course, knowing when your code runs is vital. It may be that:
document.getElementById(id)
Is attempting to locate an element before that element has been parsed into the DOM.

Error in my jquery Code `Uncaught TypeError: Cannot call method 'eq' of null`

Please mention the error in this code.
$("#gridTable tr").eq(1).find('td').forEach( function(){//some code here});
I have tried different selectors but nothing worked.
I also tried using just id of specific row but same error with message that:
Cannot call method find of null.
On:
$("#firstRow").find('td').forEach( function(){//some code here});

In each case, the error is telling you that $("#gridTable tr") returned null.
This suggests you're not using jQuery, but instead Prototype or MooTools (or something else entirely). jQuery's $() function will never return null, but both Prototype and MooTools' $() function will, if they don't find an element with the given ID. If you're using Prototype or MooTools, note that $() doesn't take a selector like jQuery's does, it takes an id. So you wouldn't use the # on it, and couldn't pass in a descendant combinator as you are in your example. (The nearest equivalent in Prototype to jQuery's $ is $$.)
Separately, if you were using jQuery, jQuery objects don't have forEach; they do have each which is similar (but the order of the arguments to your iterator function is different).

Why is there still a conflict between prototype and jquery?

I've already read about how to load prototype and jquery together but these techniques are not solving the problem.
I load jquery then this file (http://music.glumbo.com/izzyFeedback.js) and then prototype.
I've wrapped parts that use $ in izzyFeedback.js in
(function($) {
})(jQuery);
but this does not work. If I comment out the prototype load then it works correctly.

Did you put jQuery.noConflict(); before the (function($) { })(jQuery) wrapper?
There are some other techniques in the docs http://api.jquery.com/jQuery.noConflict/
I've had previous success using var j = jQuery.noConflict(); and replacing all instances of $ and jQuery with j.

You need to use jQuery.noConflict() to revert $ back to whatever had it first.
Then, you need to use jQuery instead of $ for the jQuery function or use what you assign jQuery.noConflict() to.

The JavaScript error console shows this:
Uncaught exception: TypeError: Cannot convert 'a' to object
Error thrown at line 1, column 62584 in initWidgetOnSuccess(a) in http://w.sharethis.com/share4x/js/st.8420922a8df40577276f021cf40c4bea.js:
widget.metaInfo=a.data;
called from line 1, column 0 in http://wd.sharethis.com/api/getApi.php?return=json&url=http%3A%2F%2Fmusic.glumbo.com%2F&fpc=b3bd5f6-12f4973f8f5-23e02178-1&cb=initWidgetOnSuccess&service=initWidget:
initWidgetOnSuccess();
You attempt to retrieve the a.data property and a is not an object. The error appears to be that getApi.php does not return a valid JSON string.

jQuery "'events' is null or not an object" error, when using empty() or html()

I am getting the following error in IE:
'events' is null or not an object -- jquery-latest.js?d=1848173663, line 113 character 467
I am using jQuery 1.4.2, I'm not in a position to upgrade yet as we are on an older version of jQuery UI and have way too many bugs using anything newer than 1.4.2.
I get following error when I run this bit of code the second time:
$.post("page/view.do?undoCache=" + Math.random(), {
pageId: pId
}, function(xmlContent){
console.log('1');//get this one
$('#reloadCenterDiv').empty();
console.log('2');//don't get this one unless line above is commented out, then will run til next line
$('#reloadCenterDiv').html(xmlContent);
console.log('3');//don't get this
});
I'm pretty sure I'm not doing anything else to #reloadCenterDiv between calls.
Googling around for the error "'events' is null or not an object" I found this:
"Sounds like a reference to an event
handler is still there, when the
handler itself is already gone."
That sounds logical. Any other ideas of why and when this error would occur?
I have found where this is happening, but all clues for me end there.
How do I clean things up so I can call empty() or html() on #reloadCenterDiv again?
Here is the HTML for #reloadCenterDiv:
<div id="reloadCenterDiv" style="border:none; margin: 0; overflow:auto; overflow-y:scroll; height: auto;"></div>

Not sure, but it would seem like jQuery.cache is being overwritten.
Since a DOM element has (when necessary) a serial number that maps to jQuery.cache, when you run a function like .empty(), jQuery assumes the related data exists, looks up the data for that element, and deletes it.
In place of your first log, do this:
console.log(jQuery.cache);
And see what it gives you. I'll bet that something is overwriting it. Perhaps you're loading jQuery twice?
Here's an example that intentionally deletes jQuery.cache. It gives a similar error.
EDIT:
Summary of the comments below. During .empty() (or actually cleanData()) jQuery grabs the expando from all descendant elements in order to delete the associated data.
The issue is that when jQuery does so, it assumes that the data was successfully located. In this case, somehow the data is being disassociated from the element, so retrieving the data using the value of the expando is returning undefined.
Because jQuery doesn't (or didn't in 1.4.2) verify that data was found, its attempt to access the events property on the data is causing an error, because again data is undefined.
Updated versions of jQuery fix it with if ( data && data.events ) {, which verifies that there is some object against which to ask for its events property.

If you can't update your jQuery, you can set the HTML instead:
$("#divid").html("");
This is essentially doing the same thing.

A few questions about JavaScript basics - $, "is not a function"

Being fully self-taught without actually reading up on JavaScript (It's my job now, believe it or not) there are a few things I accept but don't understand.
The first one is the dollar sign.
As far as I use understand it, it's a shortcut to document.getElementById(),
but if I log $ and document.getElementById() to console - Only $ returns a value. This value however is always function(), shouldn't it be. The element? What gives?
The second issue I have is something that keeps coming up in my code and I go out of my way to change the code to eliminate it. It's the "... is not a function" error.
For example:
if ($.inArray($(div_id).val(), arr) >= 0);
Will give the error .val() is not a function. Why? And how do I use the value of div_id to see if it's in array?

Hiya. When you're using Jquery (which I assume you are), then $ will return the jquery object. This can contain an array of matched HTML elements depending on the selector you used. For example $("#foo") will return the jquery object containing the element with id foo. You can get the actual HTML DOM element out using $("#foo")[0] - using the array-style notation.
Can you give us some more info on what you're trying to achieve with the $.inArray example?

$ is a valid variable name.
So if you try to use $ without setting it, it will not work.
A lot of people/frameworks however use $ as a shortcut to document.getElementById, they would declare it at the top of the script as:
function $(id) { return document.getElementById(id); }

$ and document.getElementById is not one of the same thing. $ gives you a function in console only when you are using some library like jquery which mapes $ to a function.
.val id primarly used to get value of the form elements and that is a jquery function. I think you need to learn more around javascript and jQuery

Neither Javascript nor the DOM define $, which (as other answerers said) is often defined in general-purpose DOM libraries like jQuery, Prototype or Mootools. Based on the particular code you included, I suspect you've been coding against the jQuery API (because you use $.inArray, see http://api.jquery.com/jQuery.inArray/; though your claim that $ aliases document.getElementById confuses matters, as jQuery expects CSS selectors rather than element IDs).
When $ is expected but undefined, that usually means you'll need to include the library whose API you're using in the HTML document.