We Keep Coding

Replace content of tag with class in javascript

Supposed that we have this html:
<div class="some-class">This is the content</div>
<h2 class="some-class">This is to be replaced</div>
In jquery, we can replace the content of the h2 using:
$('h2.some-class').html('string to replace');
This will replace the h2.some-class without changing content of div.some-class. Now, the current page doesn't have the luxury of using a framework or jquery for this instance - only javascript.
How can we replace that tag with specific class using plain javascript without affecting other tags with the same class?

You can use document.querySelector, like so:
document.querySelector('h2.some-class').innerHTML = 'string to replace';
for Multiple Elements:
document.querySelectorAll('h2.some-class').forEach(function(el) {
el.innerHTML = "string to replace";
});

You can use querySelector method of HTML elements combined with innerText property of elements:
document.querySelector('h2.some-class').innerText = document.querySelector('div.some-class').innerText;
//or any other text
Note that querySelector method will only return first match. If you have more h2 tags with some class class, you can use document.querySelectorAll method and iterate over retrieved collection.
If you want to insert only text (without any html tags) to element, it is not necessary to use innerHTML property (even due to safety reason it is not advisable), innerText will do just fine.

Using Filter to return content within class and the class itself

Filter behaves as expected, it returns multiple divs with a class of post. However, it only returns the content within the div
<h1></h1>
and not
<div class="post"><h1></h1></div>
Would it be possible to get this sort of output?
I.e. this sort of output
<div class="post"><h1></h1></div>
Here's the code:
$(result).filter('.post').each(function(i, currentElement) {
var htmlOfSinglePost = $(this).html();
var p = $(htmlOfSinglePost).attr("data-post-id");
console.log(p);
});

$(this).html(); would give you the inner HTML of the specified selector excluding the selector itself.
It you want inner html and selector element itself, you may want to use
$(selector)[0].outerHTML
here is snippet
$(".post").each(function(){
console.log($(this)[0].outerHTML)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="post"><h1></h1></div>
<div class="post"><h1>This is other one</h1></div>

Assuming your result contains HTML, given some basic example HTML, within your .each() the this refers to the current HTML element (not the jQuery) object. To get the outer HTML element, you can use outerHTML as seen below.
To get the data-post-id value from the outer content, wrap it into a jQuery wrapper to use $(outerContent).data('postId').
Just to add, the reason you cannot use getAttribute() on a result
from outerHTML is because outerHTML resturns a
DOMString
and while you can take the DOMString and convert it into an element it
is faster at this point to just use jQuery $(...outerHTML).data() but only because you are already using it
$('.post').each(function(i, currentElement) {
var outerContent = this.outerHTML;
console.log(outerContent);
var p = $(outerContent).data('postId');
console.log('postId = ',p);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post" data-post-id="15">
<h1>Post</h1>
</div>
<div class="post" data-post-id="57">
<h1>Post 2</h1>
</div>

How to copy and alert an child element

$('h1').click(function(){
var span = $(this).find('.secondary');
alert(span);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
Hello
<span class='secondary'>World</span>
</h1>
How to i copy the entire .secondary element and alert it like this
<span class='secondary'>World</span>

There's a few problems with your solution:
alert the span's outerHTML instead of just the JQuery span object.
.secondary instead of secondary for your selector (the . indicates that it's a class, read more here).
Use $(document).ready() This will make sure that JQuery is loaded and ready to be used, and that all the elements are loaded before running any JQuery.
In the end, with all these problems solved, your code should look like this:
$(document).ready(function () {
$('h1').click(function () {
var span = $(this).find('.secondary');
alert(span[0].outerHTML);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
Hello
<span class='secondary'>World</span>
</h1>

What you want is the outer HTML of the currently selected element. There is no direct function for this in jQuery, so you need to:
first wrap it in another element,
then go upward to that wrapper element
now you can use html() to get inner html of this wrapper element, which is actually the outer html for your original element.
You can use jQuery's clone() method to create a copy and perform the manipulations on that clone element, thus keeping your original element as it is.
$('h1').click(function(){
var span = $(this).find('.secondary').clone().wrap('<p>').parent().html();
alert(span);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
Hello
<span class='secondary'>World</span>
</h1>

To then grab the html element as a string you would do:
document.documentElement.outerHTML
<script>
$('h1').click(function () {
var span = document.find('secondary').outerHTML;
alert(span);
})
</script>

Move a Element in Jquery

I want to prepend a Font Element in HTML within a DIV. There will be multiple div within the same page with unique Id.
<div id="id-unknown">
"Some Text"
<font color="red">*</font>
</div>
To
<div id="id-unknown">
<font color="red">*</font>
"Some Text"
</div>
I used this Jquery code to achieve it but it gets all the fonts and prepend to every div element
$("font").prependTo($("font").parent());
http://jsfiddle.net/s4Ehw/

If you only want to do this for specific divs, just add the ID selector and use .each to obtain a reference to the specific element (this)
$('#id1, #id2, #id3').children('font').each(function() {
$(this).prependTo(this.parentNode);
});
If it so happens that every font tag needs this change, use the same .each construct as above but use $('font'), per your original code and Si Donaldson's answer.
For extra performance, replace the function body with:
var parent = this.parentNode;
parent.insertBefore(this, parent.firstChild);
i.e. replacing the jQuery calls with direct DOM manipulation.

You need to itterate through each one first using $.each and then you can work on each one individually!
http://jsfiddle.net/sidonaldson/s4Ehw/2/
$("font").each(function(){
$(this).prependTo($(this).parent());
});

use jQuery each function for manage elements in cycle
jsfiddle.net/s4Ehw/6/
$("font").each(function(){
$(this).prependTo($(this).parent());
})

$.each($("font"), function(index, element) {
console.log($(element));
$(element).prependTo($(element).parent());
});

Change position of tags in the DOM

<p>I like turtles</p>
<h3>Child brags about stuff</h3>
<h4>The Herd</h4>
How do I change the positions (order) of a tag?
To this:
<h3>Child brags about stuff</h3>
<p>I like turtles</p>
<h4>The Herd</h4>
Is there a JQuery possibility?

Use .detach() and .insertAfter() jQuery methods, like so:
$(function() {
$('p').detach().insertAfter('h3');
});
jsFiddle proof.

With jQuery:
$('h3').after($('p'));
Also see my jsfiddle.

If you have the h3 in the variable h3elem and the p in pelem (get them there however you want - jQuery, getElementById or getElementsByTagName, or anything really), use:
h3elem.parentNode.insertBefore(h3elem, pelem);
This moves the h3 to before the p.

The below code will insert <h3> tag before <p> tag, you can assign them an id to identify them uniquely.
$('h3').insertBefore($('p'));

function doWorks(){
var h3 = $("h3");
h3.remove();
h3.insertBefore("p");
}