We Keep Coding

Replacing HTML content without using jquery

I have a HTML content like this:
some of the string content <font color=blue>Test content <BR><BR><BR>
<DIV id='idOfTheDiv'>
some more goes here
<P>Test Content</P>
</DIV>
</font>
I want to remove the div without removing it's content, so the resultant data should look like
some of the string content `<font color=blue>Test content <BR><BR><BR>`
some more goes here
<P>Test Content</P>
</font>
Please note that i do not want to remove the content of the div, also i do not want to add any unwanted HTML element just to remove the div. I have tried various techniques but none of them is working at the moment.
I tried this replacing the innerHTML but it did'nt worked. I can not use replaceChild, as
<DIV id='idOfTheDiv'>
some more goes here
<P>Test Content</P>
</DIV>
is a combonation of text plus HTML so CreateTextNode does'nt workks here as it changes all HTML to plain text.
Please suggest. Thanks a Ton..

Loop over the elements inside the div (use childNodes as it also includes text nodes, while children does not).
Place the elements one-by-one before the div using insertBefore.
Remove the div using removeChild.

This will do the trick:
var el = document.getElementById('idOfTheDiv');
while (el.childNodes.length) {
el.parentNode.insertBefore(el.childNodes[0], el);
}
el.parentNode.removeChild(el);
Demo: http://jsfiddle.net/VG5ZF/
el.parentNode.insertBefore(el.childNodes[0], el); moves the first child node outside from element, reducing the length of childNodes NodeList. So in every iteration el.childNodes[0] is going to be next one. Until there are childs.

How to select all elements between two h2

I am using jQuery. I have the following html fragment:
<h1>Main Title</h1>
<h2>One header</h2>
<p>some text</p>
<p>more text</p>
<ul><li>a list</li></ul>
<h2>Another header</h2>
one link
<h3>ddd</h3>
<p>eee</p>
<h2>Header 3<h2>
<p>This is a Paragraph</p>
I need to get the content that is between every h2 element, in order to do something like this:
First Section text
some text
more text
Second section text
one link
ddd
eee
Third section text
This is a Paragraph
I've read this resource:
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
but still cannot figure how to do what I need.
Thanks in advance!

I'd suggest the following:
$('h2').each(function(){
var self = $(this),
// gets everything between the $(this) and the next 'h2' element:
contents = self.nextUntil('h2'),
/* creates a new div with which to wrap,
and inserts after the current $(this): */
newWrap = $('<div />').insertAfter(self);
// appends the contents to the new div element:
newWrap.append(contents);
});
JS Fiddle demo.
While the above works, for its intended use, and illustrates nextUntil() (which is definitely the method to use in this scenario), I'm unsure how I might show you how to achieve your aims, since you seem to have left your use-case/requirements rather vague.
References:
append().
each().
insertAfter().
nextUntil().

I believe the nextUntil method is what you're looking for.
http://api.jquery.com/nextUntil/

A good solution would be to put the content you wish to retrive in a <div> tag with an id, and use jQuery to retrive it's content like so: $('#divid').text()

jQuery: Find first two children

Using jQuery, what would be the most efficient way to find the first two children of a parent element, if one is an h1 and the other is a p. My code isn't working right now, and I would like to accomplish this using best practices.
CSS
div > *{
display: none;
}
HTML
<div>
<h1>Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<div>
<h1>Heading</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
Javascript
$('div h1').show();
$('div p:first-child').show();
Edit I'm actually working with multiple DIVs. I didn't think it would make a difference, but it looks like I was wrong.

Try,
$('div').children().slice(0,2).show();
Incase if you have more that 1 div, then try like below,
$('div').each (function () {
$(this).children().slice(0,2).show();
});

an alternative way to slice() method:
$('div').children(':lt(2)').show()
(but I recommend the slice too, especially for large collections)

http://jsfiddle.net/94EU7/
$('div :lt(2)').show();

You can user the less than selector like following
$('div > *:lt(2)').show();
Working fiddle

A descriptive selector would be
$('div').find('h1:first, p:first').show();
This makes it clear what your intent is and what elements you're selecting.

$('div p:first-child,div p:nth-child(2)').show();

$('div').children().slice(0, 2).show();

I think you'll want the eq() function, like this:
$("div").children().eq(0); // first child
$("div").children().eq(1); // second child

Not sure why you need to use jQuery for this.
var firstChild = div.firstChild;
firstChild.style.display = 'initial';
firstChild.nextSibling.style.display = 'initial';

How can I say this in jQuery?

I want to append some text after 2 closing divs to a sector element.
Click me
</div>
</div>
// this is where I want to append the text
My code appends the text after the link. How can I say "append it after the 2nd closing div"?
$('a.thingIClicked').click(function() {
$(this).append('hello');
});

The most direct way to do this is to find the second parent <div> element, and then insert the text after it.
$('a.thingIClicked').click(function() {
$(this).parent("div").parent("div").after("some text");
});
This will insert the text on the outside of the second <div> parent. Using append() will put the text on the inside of the parent, which from your example doesn't appear to be what you want.

There's probably a more elegant solution, but how about:
$('a.thingIClicked').click(function() {
$(this).parent().parent().after('hello');
});
Edit: #Zack is correct (and should probably get the answer credit for this one) - my original code would have added the text into the second enclosing div, rather than after it. I've edited my code above accordingly.

The easiest way would be to give the outer div an id and then use $("#outerdivid").
EDIT: Below will not work, but leaving it here for reference
However, you should also be able to use a jquery :parent filter:
http://api.jquery.com/filter/
$('a.thingIClicked').filter(':parent').filter(':parent').click(/**/);

Use .insertAfter()
http://api.jquery.com/insertAfter/
<div class="container">
<h2>Greetings</h2>
<div>Hello</div>
<div class="inner">Goodbye</div>
</div>
We can create content and insert it after several elements at once:
$('<p>Test</p>').insertAfter('.inner');

Use .insertAfter() - http://api.jquery.com/insertAfter/
<div class="container">
<h2>Greetings</h2>
<div>Hello</div>
<div class="inner">Goodbye</div>
</div>
We can create content and insert it after several elements at once:
$('<p>Test</p>').insertAfter('.inner');

Moving a div into another div

i have 2 main div:
<div id="div1">
<div id="minidiv1">a</div>
<div id="minidiv2">b</div>
</div>
<div id="div2"></div>
I want move the minidiv1 into the div2 with jquery
how can i do?

You can simply append it to the div2, and it will change its location in the DOM:
$('#minidiv1').appendTo('#div2');
// or
$('#div2').append('#minidiv1');
The difference of the above two lines is what is returned, appendTo returns the #minidiv element, append will return the #div2 element.
Use the one you find most useful if you want to make more actions (by chaining).

$('#minidiv1').appendTo('#div2');
or
$('#div2').append($('#minidiv1'));

$("#minidiv1").appendTo("#div2")

Luca, did Paul's answer actually work for you? I think you need to be referencing the jQuery object like so:
$($('#minidiv1')).appendTo('#div2');
// or
$('#div2').append($('#minidiv1'));
Otherwise, jQuery will just append the string "#minidiv1" to #div2, rather than moving your existing div.