Develop Reference

prev() not returning div element

I'm probably being especially dense about this, but I can't get an element to return using prev(). My basic HTML structure is:
<div>
<table></table>
</div>
<input type="button">
Where when I press the button, I want to get the previous element (the div element). To achieve this my button has a function attached to it with
var nearestDiv = $(this).prev();
When I've checked the contents of nearestDiv in the console it appears to be some kind of JQuery object rather than a HTML div. I've tried popping .val() at the end of .prev() but this comes back empty. How can I get the div element?
Note that my button is generated on the fly and doesn't have anything which identifies it.

you need to use jquery get function, to get a native html object and not the jquery wrapper:
$("input").on("click",function(){
console.log("jquery wrapper:",$(this).prev());
console.log("native html div object:",$(this).prev().get(0));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table></table>
</div>
<input type="button">

If your html structure is same as you provided in the question, it will definitely return the div element. Note that there is no val() method for div element, you need to either use .html() or .text() inorder to get the contents.
$("input[type='button']").click(function () {
var div = $(this).prev();
alert(div.html());
alert(div.text());
});
Fiddle

You need to give .text() or .html() for standard HTML Elements. So your code should be:
var nearestDiv = $(this).prev().html();
var nearestDiv = $(this).prev().text();

How to hide HTML element containing only spaces using jQuery?

I have the following HTML :
<div id="rightCon">
</div>
And then I have the following script at the top :
$('#rightCon:empty').hide();
Why is the div not hiding? I can see that there is some spaces(that I can´t get ridoff) but does that really matter? How do I remove/hide this div when its empty with only spaces?

Your element appears to have a bunch of white space, which will give it a text node. It won't be matched by :empty for that reason.
You could try finding the element and checking it's contents explicitly:
$('#rightCon').filter(function() {
var text = $(this).text().replace(/\s*/g, '');
return !text;
}).hide();

This solved the problem.
$(document).ready(function () {
if($('#rightCon').text().trim().length < 1)
{$('#rightCon').hide();}
});

Your div is not actually empty (It contains whitespace). So the selector $("#rightCon:empty") will never evaluate and hide the div.
Since HTML elements should be unique, you can safely assume that you can select the correct element via:
var rightCon = $("#rightCon");
You can then hide the element via:
right.hide();
Or
$("#rightCon").hide();

How do I get the element containing clicked text in Javascript/Jquery?

I would like to replace the text on pages when I click on the text or even just replace the single word clicked on. I have tried a top down approach selecting all elements in the DOM, filtering out the textNodes, wrapping each with tags and adding a click event handler to each tag. But this is far too slow and inefficient particularly on very large and dynamic sites.
I only need to replace the text that was clicked. Is there a bottom up way of doing this starting from the event.target? How do I find the closest textNode to the event.target, for example?

In the example you gave, you can just do the following; for more info see How do I select text nodes with jQuery?
$(document).click(function(event) {
textNodes = $(event.target).contents().filter(function() {
return this.nodeType == 3;
});
textNodes.each( function() {
$(this).replaceWith("New Text");
});
})

Have you tried Jquery's .closest() ?
Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Accessing elements inside dynamically created divs with HTML/Javascript

I'm quite new to javascript and JQuery programming. Usually, to access elements I give them an id, so I can get them like $("#"+id).blabla().
But now I need to dynamically create a div, and access elements inside it.
Something like
<div id="automaticallyGeneratedId">
<div ???></div> <!-- first div -->
<div ???></div> <!-- second div -->
</div>
What are the best practices to access and identify each of the inner divs?
I generate another id for them?
Or what?
I don't have the theory of selectors fully clear.
edit: modified the question from identifying a single inner div to identifying divs amongs many of them

You can maintain a pattern when you're generating id. For example:
if you always generate id like: myid1, myid2,myid3...
<div id="myid1">
<div></div>
</div>
<div id="myid2">
<div></div>
</div>
......
then you can try:
$('div[id^=myid]').find('div').foo();
OR
$('div[id^=myid] div').foo();
Here, ^= is start with selector, so div[id^=myid] will select div whose id start with myid.
You can also use Contain word selector which is ~= and use like $('div[id~=myid]'). This will select div with id contains word myid.
Instead of id if you want to use other attribute eg. name then change selector like:
$('div[name^=myid]') or $('div[name~=myid]').

It's usually a good practice that if you already have a reference to that outer div to just search from there using find.
You can give it an id, or if you want to use a more general approach you can use classes.
<div class="subdiv">...
$('#automaticallyGeneratedId').find('div.subdiv')

Usually, when you create them, you can assign event handlers and the likes straight on them. Like this:
var div = $( '<div></div>' );
div.on( 'click', function() {
// Do something when the generated div is clicked
});
// Then, add it to the DOM
$( 'body' ).append( div );
You don't need to bother selecting them with ID or classes, they're already available in your code.
Another way is to use event bubbling to handle newly created elements of the same class. A good link about this is this one: http://beneverard.co.uk/blog/understanding-event-delegation/

Many ways you can create an element and give him an Id or Class, or use the DOM to access it..
$("html").prepend('<div id="foo"></div>');
$("#foo").doSomething();
another way
$("#automaticallyGeneratedId").find("div").doSomething();

To access the div in the element with the id:
$("#automaticallyGeneratedId div").whatever

If you cache the divs you could use something like:
var myDiv1Child = $('div', myDiv1);

Create a delegated listener and within the listener you can find the element by doing this
//If a div inside the parent is clicked then execute the function within
$('.PARENT_CLASS').click("div", function(){
//This variable holds all the elements within the div
var rows = document.querySelector('.PARENT_CLASS').getElementsByTagName('div');
for (i = 0; i < rows.length; i++) {
rows[i].onclick = function() {
console.log(this); //The element you wish to manipulate
}
}
});

Create a div containing target div using jQuery

I think that this should be easy, but I'm not able to get it working. I want to target a div or other element using jQuery and then dynamically create a div containing the targeted element, for example:
jQuery ('.myclass')
How can I create a div with the background-color attribute set to white that contains 'myclass' element?
Initially I have: <div class="myclass">Some HTML elements inside</div>
And after executing the jQuery call i want to have: <div style="background-color:#fff"><div class="myclass">Some HTML elements inside</div></div>
I hope that you understand my question...

You can use the wrap function to put a wrapper around the matching elements. I'd prefer to use a class for the background, but you can assign CSS properties directly as well.
$('.myclass').wrap( $('<div></div>').css( 'background-color', '#fff' ) );
or
$('.myclass').wrap( $('<div></div>').addClass('white-background') );

var $myDiv = $('<div>').css('background-color','#fff').append( $('.myclass') );
You can then write this variable to the DOM as you see fit, or do whatever else you need to do.