Develop Reference

Can you access the DOM children of an element using JS?

What I would like to do:
var myDIv = document.getElementById('myDivID');
myDIv.getImmediateChildren;

something like this:
var children = document.getElementById('myDivID').childNodes

Try Like this
var myDIv = document.getElementById('myDivID');
myDIv.Children;

To get all children, use :
myDiv.children
example here : https://jsfiddle.net/vgncd96t/
-
To get the first child, use :
myDiv.firstElementChild
example here : https://jsfiddle.net/vgncd96t/1/
-
To get the last child, use :
myDiv.lastElementChild
example here : https://jsfiddle.net/vgncd96t/2/

You can do something like:
var myDIv = document.getElementById('myDivID');
var children = myDiv.children;
That will get you all children of the element.
There are even more options, like if you want only the first child, you can do:
var firstChild = myDiv.firstElementChild;

document.getElementById("myDivID").children[0]
will give you the first immediate child element

Replace different Values in String?

I have a string which looks like this: (id:561644cdb40fbe0100247dd7:q) (id:56165d8a79c8c40100adbdb6:q) and I need to replace the different id's with different values. I already have the id's in a variable and trying to loop through with something like this var mailId = "(id:" + rplcId + ":q)"; But If I use the replace() function it doesnt work...Any other suggestions?

You can select the id with:
"(id:56165d8a79c8c40100adbdb6:q)".split(":")[1]

var id = "(id:561644cdb40fbe0100247dd7:q)";
var idArr = id.split(":");
idArr[1] = newId; //56165d8a79c8c40100adbdb6
var mailId = idArr[0]+idArr[1]+idArr[2];
and please provide your full code

$.grep filter with contains

I am trying to filter an array with grep to apply CSS. My code is like below.
var depos = $('.panel-default > .panel-heading');
var chkd = ['ABC','XYZ'];
var found_p = $.grep(depos, function(v) {
return jQuery.inArray(v.innerText,chkd);
});
The first issue is that found_p is not filtering the needed array values from chkd. After filtering it, how can I apply CSS? I tried like below but it fails
$(found_p[0]).css('background-color', 'red');
Can anybody help me out with this.

Assuming from your code that you're trying to find the elements that have innerText matching a value in the chkd array, you can use the filter() method. Try this:
var $depos = $('.panel-default > .panel-heading');
var chkd = ['ABC','XYZ'];
var $found_p = $depos.filter(function() {
return $.inArray($(this).text(), chkd) != -1;
});
The $found_p variable will then hold a jQuery object with all matched elements. You can apply CSS to them like this:
$found_p.css('background-color', 'red');
Example fiddle
However, I would suggest using CSS classes instead of adding inline styles as it is much better practice.

JavaScript ID tag selection

Is there a better way to write jQuery('#'+ myId) in JavaScript.
I have an ID in a variable without the # character and jQuery('#'+ myId) looks ugly.
var myId = 'last-element-id';
jQuery('#'+ myId)
I'd like to avoid the + character to join the strings.
Thanks

But, have in mind that returned element is not a jQuery collection
function getElement(element) {
return document.getElementById(element)
}

function jQueryID(myId){
return jQuery('#'+ myId);
}
and then call like
jQueryId(myId);

As simple as that:
var myId = '#last-element-id';
jQuery(myId);
or
var myId = '#' + 'last-element-id'; // if 'last-element-id' is dynamically generated value
jQuery(myId);

I think when you are using jQuery, is better you stick with jQuery in all your code.
My offer is, create a function as below:
var getId = function(id){
return '#'+ id;
}
and call that anywhere you need, and stick with jQuery. like this:
$(getId(id));

Getting an element as jQuery object from a set of elements

Is there a way to get an element from a jQuery object, but as jQuery object?
If I wanted to get the text of elements, presently I'd write it like this:
var elements = $(".set");
for (var idx=0; idx<elements.size(); idx++) {
var text = $(elements.get(idx)).text();
// do something with text
}
Note that I have to wrap elements.get(idx) in another jQuery call $().
I realize this isn't that big a deal, I just want to make sure I'm not doing extra work if there is an easier way.

Have a look at .eq() [docs]:
// returns the third div (zero-indexed) in a jQuery wrapper
var $mydiv = $('div').eq(2);
Is this what you mean?

Why not go with:
$(".set").each(function (idx) {
var text = $(this).text();
// do something with text
});

you can use:
$(".set").each( function () {
var text = $(this).text();
// do stuff
});