We Keep Coding

Insert plain text between two divs

I have some HTML, like this:
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>
Is there a way using jQuery to insert the plain text Bar directly in between #foo2 and #foo3, so the resultant HTML would be like this:
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
Bar
<div id="foo3">foo3</div>
</div>
I am able to put the text in with a <span> tag using $("<span/>").text("Bar").insertAfter("#foo2"), but is there a way to just put the plain text there, without a <span> around it?

You can use .after:
$('#foo2').after('bar');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>

Use document.createTextNode("bar"):
$("#foo2").after(document.createTextNode("bar"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>

In the case you need an alternative with plain JavaScript, you can use insertAdjacentText()
document.getElementById('foo2').insertAdjacentText('afterend', 'bar');
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>
In case you are interested, the first argument provides other alternatives:
element.insertAdjacentText(position, element);
position
A DOMString representing the position relative to the element; must be one of the following strings:
'beforebegin': Before the element itself.
'afterbegin': Just inside the element, before its first child.
'beforeend': Just inside the element, after its last child.
'afterend': After the element itself.
element
A DOMString representing the text to be inserted into the tree.

Using eq() and find() to add a class

I have a few divs within a containing div, eg:
<div id="container">
<div class="itmeholder">
<div class="item">
</div>
</div>
<div class="itmeholder">
<div class="item">
</div>
</div>
<div class="itmeholder">
<div class="item">
</div>
</div>
<div class="itmeholder">
<div class="item">
</div>
</div>
</div>
I want to add a class to the 2nd 'item' div, so I created:
$('#container:eq(1)').find('.item').addClass('newclass');
This isnt working. I have also tried using nth-child() as well, also to no avail.
Can anyone suggest to me a better way of going about this?

May be this is what you want:
$('#container').find('.item').eq(1).addClass('newClass')

Your are missing # for id selector, also need to modify the selector.
Live Demo,
$('#container .itmeholder:eq(1)').find('.item').addClass('newclass');

try this
$('#container').find('.item').eq(1).addClass('newclass');​

First, you target the container separately:
$('#container')
Then fetch its children, limiting it to only the 2nd child:
.children(':eq(1)')
The perform the rest of your search and action:
.find('.item')
.addClass('newclass');
Complete code:
$('#container')
.children(':eq(1)')
.find('.item')
.addClass('newclass');

$('#container .itmeholder:eq(1)').find('.item').addClass('newclass');
First find the inner element childs and use eq to find the required item and add class to it

How to use JS innerHTML by class name and child of a class

Is it possible to do a
document.getElementBy Class ("post[1] .classname").innerHTML ?
post[1] to be the second DIV with class='post' and I want the child .classname of this.
For example: I want to get the innerHTML of the second post => div class="inside".
<div class="post">Post 1
<div class="inside"></div>
</div>
<div class="post">Post 2
<div class="inside">//this here</div>
</div>
<div class="post">Post 3
<div class="inside"></div>
</div>

But if you don't want to use jQuery, but are OK with only supporting later browsers, you can use document.querySelector. http://jsfiddle.net/mendesjuan/4hEwd/
document.querySelector('.post:nth-child(2) .inside').innerHTML
Here's a list of browsers that support it: http://caniuse.com/queryselector

Try using jQuery:
alert($('.post:nth-child(2) > div').html());
JSFiddle here.

insert new DOM between elements

I have the following part of DOM:
<div id="content">
<div id="div-1"></div>
<!-- here new DOM -->
<div id="div-2"></div>
</div>
I need to insert new part of DOM between "div-1" and "div-2".
How I can do it with jQuery?

use .after() on div-1
$('#div-1').after('<div id="new">new div</div>');
or use .before() on div-2
$('#div-2').before('<div id="new">new div</div>');

$('#div-1').after('<div>new content</div>')'
or
$('<div>new content</div>').insertAfter($('#div-1'));

Fastest way to access a node

I have about thousand DIV tags structured this way:
<div id="1">
<div class="1"></div>
<div class="2"></div>
...
</div>
<div id="2">
<div class="1"></div>
<div class="2"></div>
...
</div>
If I want to now access a particular node, say 'div#10 div.5' - what is the fastest way to do it using javascript DOM traversal? I already have the index values "10" and "5" - I am just looking for the fastest way to achieve this.
Thanks a lot.

If you've got about 1000 DIVs I assume this is auto generated html?
If so, is there any reason why you can't add an id to the inner DIVs too?
<div id="1">
<div id="1.1" class="1"></div>
<div id="1.2" class="2"></div>
...
</div>
<div id="2">
<div id="2.1" class="1"></div>
<div id="2.2" class="2"></div>
...
</div>
Then you can just use getElementById and not have to worry about ordering or spacing etc.
Since element ids have to be unique on the page then this should always be the fastest way to look up the element.

Without validation and assuming the child nodes are the only nodes and all in sequence;
document.getElementById('10').childNodes[4];
Watch out for whitespace that becomes a node https://developer.mozilla.org/En/Whitespace_in_the_DOM

using jquery:
alert($("#10 > .5").html());