We Keep Coding

using document.querySelector with complex CSS selectors

In JavaScript I want to use document.querySelector to "grab" the last div (<div class="widget-footer">) in below HTML. However after many tries, I still can't figure out the correct CSS selector syntax to use.
The following code does not work:
document.querySelector (".skin-grid-widgets.ui-sortable.gridWidgetTemplatePositie.AgendaStandaard.disablesorting.hoogte-1-knoppen-0.breedte-1.widget-footer")
Here is the HTML I am working with
<div class="skin-grid enkeleKolom" id="Infobalk">
<div class="skin-grid-widgets ui-sortable">
<div class="gridWidgetTemplatePositie AgendaStandaard disablesorting hoogte-1-knoppen-0 breedte-1">
<div class="widget-header">
here comes the header text
</div>
<div class="widget-body">
some body text
</div>
<div class="widget-footer">
here comes the footer text
</div>
</div>
</div>
</div>
I've surfed everywhere to find example of complex CSS selectors used with querySelector, but to no avail. Any help would be really appreciated.

Your issue is you need a space in between each child element you are trying to select. If you do not have spaces in between your class selectors, by CSS specification, it will look for both classes on the same element.
Change your selector to look like the following:
var footer = document.querySelector(".skin-grid-widgets.ui-sortable .gridWidgetTemplatePositie.AgendaStandaard.disablesorting.hoogte-1-knoppen-0.breedte-1 .widget-footer");
footer.classList.add("highlight");
.highlight {
background-color: yellow;
}
<div class="skin-grid enkeleKolom" id="Infobalk">
<div class="skin-grid-widgets ui-sortable">
<div class="gridWidgetTemplatePositie AgendaStandaard disablesorting hoogte-1-knoppen-0 breedte-1">
<div class="widget-header">
here comes the header text
</div>
<div class="widget-body">
some body text
</div>
<div class="widget-footer">
here comes the footer text
</div>
</div>
</div>
</div>

try this:
<script>
document.querySelector (".skin-grid-widgets .gridWidgetTemplatePositie .widget-footer");
</script>
You don't need to add adjacent classes like "skin-grid-widgets ui-sortable" in querySelector, if you do so then query selector assumes that "skin-grid-widgets" is parent of "ui-sortable". Use just one of the classes at one DOM level.

The selector ain't complex, your thoughts are.
Listen to yourself, to the description you provide of what you want to select:
"grab" the last div in below HTML
Not grab the node with the class widget-footer inside of a node that has all these classes: gridWidgetTemplatePositie AgendaStandaard disablesorting hoogte-1-knoppen-0 breedte-1, inside a node ...
//a utility, because DRY.
//and because it's nicer to work with Arrays than with NodeLists or HTMLCollections.
function $$(selector, ctx=document){
return Array.from(ctx.querySelectorAll(selector));
}
//and the last div in this document:
var target = $$('div').pop();
or
"grab" <div class="widget-footer"> in below HTML
var target = document.querySelector("div.widget-footer");
or the combination: grab the last div.widget-footer in the HTML
var target = $$('div.widget-footer').pop();

How to remove div with a particular text in it

I have some div tags which has some text & elements in it & I want to remove those div's, They are looks like this
<div style="font-family:verdana;font-size:12px;">
Example
example
</div>
There are many div's like this & I want to remove them all with using jQuery or javascript

If the elements have nothing in common such as a class, you can remove it by using the :contains and remove() method.
$("div:contains('Example')").remove()
Full example shown below:
$("div:contains('Example')").remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div>
Example
</div>
<div>
Darren
</div>
If the elements do have something in common you could use the class selector.
$(".common-class").remove();

Based on Darren's answer, if you want to be extra sure (as :contains will match and delete any div containing the word example), you can make sure it's a div that has an anchor with that same example as children, then go back to the parent and remove it.
If this doesn't work, please paste a few more divs so we can see a common pattern and target it the safest way possible.
$(document).ready(function(){
$('#remove').click(function(e){
$("div:contains('Example')").children("a:contains('example')").parent("div:contains('Example')").remove()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="font-family:verdana;font-size:12px;">Example example</div>
<div style="font-family:verdana;font-size:12px;">Don't remove example</div>
<div style="font-family:verdana;font-size:12px;">Example don't remove</div>
<button id="remove">
Remove undesired divs
</button>

dynamically assign text to <a> from <li>

Using jquery 1.8.3
I am creating a function which creates an "li" element and sets some properties, including establishing an event listener.
$(this).closest('a').text(text); //$(this) is the li tag, and it does show that in the browser if you step through
The dom structure looks like this:
<div>
<a></a>
<div>
<ul>...</ul>
</div>
</div>
If you follow it in the debugger, both the .text() method and "text" variable are being populated with the correct info. There is something going on with the assignment part that I can't track. I am sure it is something stupid and obvious I am missing, but I could use some help getting over this hump.
If you need more info, please let me know.

The anchor tag is not the ancestor of the li .. Rather it is a sibling of the div in which it is encased..
You are looking for this I belive
$(this).closest('div').prev('a').text(text);

You have to use html() function from jQuery:
$(document).ready(function(){
$("#element li ").click(function(){
$("#linki").html($(this).html());
});
});
<a href="" id="linki" ></a>
<a></a>
<div>
<ul id="element">
<li>Hello</li>
</ul>
</div>
live example http://jsbin.com/opoqid/46/edit

Cannot override the CSS at this site

This site is overriding my CSS with its own and I cannot get around it! It has style.css with "text-align: center" in the body.
I have <div id="mydiv"> appended to the body and it's normally got "text-align: left". There are <ul>s and <li>s underneath #mydiv and they are inheriting the body's 'center' for some reason. I tried this and it's still not working.
$('#mydiv').children().css('text-align', 'auto');
How the heck do I reclaim my CSS!?
#Grillz, the HTML looks like this:
<div id="mydiv">
<ul class="container">
<li rel="folder" class="category">category1
<ul><li rel="file" class="subcategory">subcategory1</li></ul>
<ul><li rel="file" class="subcategory">subcategory2</li></ul>
</li>
<li rel="folder" class="category">category2
<ul><li rel="file" class="subcategory">subcategory3</li></ul>
<ul><li rel="file" class="subcategory">subcategory4</li></ul>
</li>
</ul>

If you want to do it via jQuery, your .children() is only selecting the <ul>, not the <li>... You need to do something like this:
$('#mydiv').children().children().each(function() {
$(this).css('text-align', 'left');
});
Firstly, its drilling down two levels, down to the <li>. Secondly its using the .each() function to apply the css styling to each child...
EDIT: after seeing your html above, below is probably more appropriate:
$('#mydiv').find("li").each(function() {
$(this).css('text-align', 'left');
});
This uses the .find() function to find every <li> element inside #myDiv.
Working jsFiddle (with color instead of text-align) here: http://jsfiddle.net/Damien_at_SF/Vabvu/
Hope that helps :)

All you need is a more specific css rule. Something like this will set text alignment to left for all the children of #mydiv.
body #mydiv * {
text-align: left;
}

Try without children() function

$(document).ready(function(){
$('body').css('text-align', 'left !important');
});
and I'm guessing you trued to insert <UL/> and <LI/> in your example. you need to define them as code for them to show up

Is there a performance difference between 'append' vs 'html'? [duplicate]

Using jQuery, what's the performance difference between using:
$('#somDiv').empty().append('text To Insert')
and
$('#somDiv').html('text To Insert')
?

$('#somDiv').html(value) is equivalent to $('#somDiv').empty().append(value).
Source: jQuery source.

.html will overwrite the contents of the DIV.
.append will add to the contents of the DIV.

difference between append() and html() in jQuery
.append() and .html() are the most useful methods in jQuery. But these are far different from one another, .append() add some value to the existing one. Where .html() do the same but it removes the old value first.
Here is an example:
<ul id="test">
<li>test</li>
</ul>
Now I will use .append() to add one <li>, For that I will write:
<script type="text/javascript>"
jQuery("#test").append("<li>test1</li>");
</script>
The output of this jQuery will be:
<ul id="test">
<li>test</li>
<li>test1</li>
</ul>
Now if I use .html() to add one <li>, For that I will write:
<script type="text/javascript>"
jQuery("#test").html("<li>test1</li>");
</script>
The output of this Script will be:
<ul id="test">
<li>test1</li>
</ul>
Here in this example .append() add one extra <li>, whether .html() removes the old one with new one. This is the main difference between .append() and .html() in jQuery.

In simple words:
$('#somDiv').append('blabla')
works like this:
<div id='somDiv'>some text</div>
becomes:
<div id='somDiv'>some textblabla</div>
And innerHTML replaces the contents, so it becomes this:
<div id='somDiv'>blabla</div>

The correct syntax is
$("#somDiv").html("<span>Hello world</span>");