Develop Reference

jQuery adding element to dynamic element

I have a dynamically added div which I want to append in response to a click event.
The initial div is created and rendered when added however trying to add children divs to the first dynamic div does not render - yet in console log the dynamic div shows the new div has been added.
var newDiv = $('<div id="#newDiv'+pID+'" />').css({
display:"inline-block",
width:"90%",
height:"100px",
position:"relative"
})
var newHTML = "<div>some content</div>"
$(newDiv).html(newHTML)
$('#dynDiv'+ID).append($(newDiv))
console.log($('#dynDiv'+pID)) // displays code created successfully
So newDiv is not rendered nor present when "inspecting" the DOM using debugger.
Why is the second attempt to add dynamic content failing ??

Have you remembered to append it to something? Remember, jQuery can have DOM elements present in memory which are not part of the page:
newDiv.appendTo($(parentElement));
eg. http://jsfiddle.net/dTe73/
A couple of other possible errors:
# is not a valid character to put in an id in $('<div id="#newDiv'+pID+'" />')
$('#dynDiv'+ID) looks like a typo for $('#dynDiv'+pID) (or the other way around)
Not an actual error, but redundant use of $: $(newDiv) is absolutely equivalent to newDiv

I found the source of the problem was that the parent div to which I was adding the dynamic div was not unique - there were multiple elements with same name ! This makes sense that it would fail. Thanks for everyones input.

Replace $(newDiv).html(newHTML) with newDiv.html(newHTML)
and $('#dynDiv'+ID).append($(newDiv)) with $('#dynDiv'+ID).append(newDiv)
and it should work.

$.each only affects the first element?

Looping through all the elements of the class, I see the code below only affecting the first element in the array yet the console log logs every one of them.
del = $('<img class="ui-hintAdmin-delete" src="/images/close.png"/>')
$('.ui-hint').each(function(){
console.log($(this));
if ($(this + ':has(.ui-hintAdmin-delete)').length == 0) {
$(this).append(del);
}
});
The elements are all very simple divs with only text inside them. They all do not have the element of the class i am looking for in my if statement, double checked that. Tried altering the statement (using has(), using children(), etc). Guess i'm missing something very simple here, haha.
Will apperciate input.

I think what you need is (also if del should be a string, if it is a dom element reference then you need to clone it before appending)
$('.ui-hint').not(':has(.ui-hintAdmin-delete)').append(function(){
//you need to clone del else the same dom reference will be moved around instead of adding new elements to each hint
return del.clone()
});

You can do this:
$('.ui-hint:not(:has(.ui-hintAdmin-delete))').append(del);
without even using the each loop here. As jquery code will internally loop through all the descendant of the ui-hint class element and append the del element only to the descendant not having any .ui-hintAdmin-delete elements.

While it would probably help to see your HTML as well, try changing your conditional to
if (!$(this).hasClass('ui-hintAdmin-delete')) {
$(this).append(del);
}

D3 adding multiple children to the same parent

How would I go about adding multiple child elements to a parent?
This is what I would like to achieve :
<div id = "myDiv">
<div id = "child1"></div>
<div id = "child2"></div>
</div>
This would, however, make child2 a child of child1:
$("#myDiv").append("div").attr("id", "child1").append("div").attr("id","child2")
Is there any way of adding two children with different attributes using dot notation?
EDIT: How about also appending a child to child1?

$("#myDiv").append("<div id='child1'>").append("<div id='child2'>")

And another
$('#myDiv').append($('<div>', { id: 'child1' })).append($('<div>', { id: 'child2' }))

$("#myDiv").append("div").attr("id", "child1").append("div").attr("id","child2");
Appends "div" text to myDiv, then changes the id attribute of the div formerly known as "myDiv" to "child1" then appends more text and changes the id again.
Change form of your statements:
$("<div>").attr("id", "child3").add($("<div>").attr("id", "child4")).appendTo("#myDiv");
With this, jQuery creates a properly formed div, assigns and id attribute to it, then adds another div with and id. Note that the second addition with .add() is properly formed due to the $ inside there and the id attribute added before it gets added to the first one, then they both get appended.
NOTE: you can also use the pattern above or do simple string for the child of child1 as:
$("<div id='child1A'/><div id='child1B'/>").appendTo("#child1");
Worth noting this only hits the DOM once which is desired and you can build up the string to append more as well - still only hitting the DOM once with that append.

You could clone() #myDiv to a variable, loop up to the number of child elements needed, change the attribute and then appendTo #myDiv. I know right, kinda complex.
Perhaps you're better off using append two times. (In two separate lines, no chaining)
Oh wait, you could use add (Here's a fiddle : http://jsfiddle.net/w4qnk/)
$elemts = $()
$elemts = $elemts.add($('<div/>', { 'id': 'child1'}))
$elemts = $elemts.add($('<div/>', { 'id': 'child2'}))
$("#myDiv").append($elemts)

select html object without id

Edit: one missing piece of information - I can't use the class selector because there are more divs with the same class. I already thought of that, but I forgot to mention it. I have no idea why my post got downvoted, but it seems awfully silly considering I provided a lot of information, gave it honest effort, and tried to be verbose with code examples. People on this forum are ridiculous sometimes.
I'm trying to set the id of a div that doesn't have one and there's no way I can give it one upon generation of the page. I've tried using jquery (.each, .contains, .find, .filter, etc.) and I can't seem to get it right. I know a ton of people have asked this question, but none of the answers made sense to me.
I have the ability to set the text (html?) of the div, but nothing else. It ends up looking like this:
<div class="dhxform_note" style="width: 300px;">Remaining letters: 500</div>
I want a handle to the div object so I can show the user how many more letters they can type by updating the text.
Using this:
$("div")
returns a list of all divs on the page. I can see the target div in the list, but I can't get jquery to return a single object.
I know it can also be done with something like this:
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++) {
if( /^Remaining letters/.test(divs[i].innerText) )
divs[i].id = "kudosMsgNote"
}
}
but I was hoping to complete this with a cleaner looking solution involving jquery. I also simply want to know how to do it with jquery, aesthetics not withstanding.

Use a class selector.
var theDivViaTheClass = $(".dhxform_note");
Class Selector (“.class”)
Description: Selects all elements with the given class.
version added: 1.0
jQuery( ".class" )
class: A class to search for. An
element can have multiple classes; only one of them must match.
For class selectors, jQuery uses JavaScript's native
getElementsByClassName() function if the browser supports it.

You seem to be targeting the <div> by its text. Try using the :contains selector:
$("div").filter(':contains("Remaining letters")').first().attr("id", "kudosMsgNote");
The .first() is to make sure you don't set the same id for multiple elements, in case multiple elements contain the text "Remaining letters".
Here's the docs for the :contains selector: http://api.jquery.com/contains-selector/
Be careful, the text you're looking for is case sensitive when using :contains!

Is that div the only one with the class dhxform_note? If so, you can use the class selector:
$('.dhxform_note').html();

With jQuery, you can specify any css selector to get at the div:
$(".dhxform_note").attr("id", "kudosMsgNote");
will get you this element as well.
Selecting on inner text can be a bit dicey, so I might recommend that if you have control over the rendering of that HTML element, you instead render it like this:
<div name="remainingLetters" class="dhxform_note" style="width: 300px">Remaining Letters: 500</div>
And get it like this:
$("[name=remainingLetters]").attr("id", "kudosMsgNote");
However, it's possible that you really need to select this based on the inner text. In that case, you'll need to do the following:
$("div").each(function() {
if ( /^Remaining letters/.test($(this).html()) ) {
$(this).attr("id", "kudosMsgNote");
}
});

If you cannot set id for whatever reason, I will assume you cannot set class either. Maybe you also don't have the exclusive list of classes there could be. If all those assumptions really apply, then you can consider down your path, otherwise please use class selector.
With that said:
$("div").filter(function() {
return /^Remaining letters/.test($(this).text())
}).attr('id', 'id of your choice');

For situations where there are multiple divs with the class dhxform_note and where you do not know the exact location of said div:
$("div.dhxform_note").each(function(){
var text = $(this).text();
if(/^Remaining letters/.test(text)){
$(this).attr("id", "kudosMsgNote");
}
});
EXAMPLE
If, however, you know that the div will always be the 2nd occurrence of dhxform_note then you can do the following:
$("div.dhxform_note").get(1).id = "kudosMsgNote";
EXAMPLE
Or do a contains search:
$("div.dhxform_note:contains('Remaining letters')").first().attr("id", "kudosMsgNote");
EXAMPLE

Get all the elements inside a div which are tabable in dom tree order

I have a requirement to handle all the elements inside a DIV. Elements must be tabbable. i am trying like this
jQuery("#container a,:input:not(:hidden)")
But it is fetching me all the input elemnts on the page. how to get the elements(a,:input:not(:hidden)) inside this div. TIA

When you're doing :
jQuery("#container a,:input:not(:hidden)")
^ (1) ^ (2)
There you're searching in the container, the a element.
You're searching not hidden :input (pseudo-classes input does exists ?) in the whole page !
Try this one :
jQuery("#container a, #container input:not(:hidden)")