Develop Reference

JQuery replace all contents in a div except tags

I have to replace some characters in all a div, but when I run the code, the function replaces me also the html tags characters
my code is:
$("#main").children().each(function() {
$(this).html($(this).html().replace(/s/g, "K"));
})
<div id="main">
<p>Some contents that will be replaced... <span>this will not be in a span tag :(</span></p>
</div>
result:
<div id="main">
<p>Kome contentK that will be replaced... <Kpan>this will not be in a Kpan tag :(</Kpan></p>
</div>

If your goal is to preserve all the markup within the div but replace text within all those tags, that's difficult. You need to find just the text nodes and no other nodes and do the replacement within each of the text nodes individually.
This question may help: How do I select text nodes with jQuery?

TypeScript or JS- How to select an element and all its children into a HTMLCollection?

Updated
The code I have come up with is:
<section id="Test">
<header>Welcome</header>
<p>This is a test</p>
<div>Nothing here</div>
</section>
var element = document.getElementById("Test");
var elements = <HTMLCollection>element.getElementsByTagName("*");
I want the collection to include <section>, <header>, <p>, and <div> the above code only has <header>, <p>, and <div>. Is there anyway I can add the <section> itself to the collection?
The problem is that I want to include the element itself into the elements collection. I know I can use outerHTML and put it in a temp container and then get all the element inside from that but i'm looking for a cleaner way.

You can use a comma-separated list with querySelectorAll, where the first item is the element itself.
This Snippet uses your HTML to retrieve section Test and its children: header, p, and div:
var elements= document.querySelectorAll('#Test, #Test *');
console.log(elements.length); //4
<section id="Test">
<header>Welcome</header>
<p>This is a test</p>
<div>Nothing here</div>
</section>

Get text from all spans in div using jQuery

I'm dynamically adding span elements to a div. I want to retrieve the text from all the span elements in the div at a later stage. How do I do this? I'd like to use jQuery, but Javascript is fine I guess.
Section of Javascript creating the span elements:
var x = ui.item.value;
var span = document.createElement("span");
span.innerHTML=" "+x+"";
$("#selected").append(span);
This is inside an on click event.
The div is called "selected".

You can try something like this:
var txt= "";
$("#selected span").each(function(){
txt += $(this).text();//here you get the values from each span inside selected element
});
$("body").append(txt);//here append the collected text inside e.g. body
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selected">
<span>1</span>
<span>1</span>
<span>1</span>
<span>1</span>
</div>

No need for a .each() or any other loop. Just calling .text() will be enough since, according to the JQuery docs, it:
Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.
So:
$("#selected").click(function() {
var text = $(this).find("span").text();
alert(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="selected">
<span>1</span>
<span>2</span>
<span>3</span>
</div>

jquery changing clone style changes original style

I am trying to add change the inline-style property of my html. For this, I cloned a div and append it to another div. I am also trying to display the HTML contents in textarea after stripping the inline-style. Here's my code
//Store html in temp div
$("#html_code").clone().appendTo("#temp_html");
//remove style attribute
$("div.animation-1 span.front").removeAttr('style');
//clone this and attach to textarea
var html_extracted = $("#temp_html").clone().html();
$("#show_html").text(unescape(escape(html_extracted)));
Here is the #html_code:
<div id="html_code">
<!--HTML Code-->
<div class='animation-1'>
<span id="box" class='letter hidden'>
<span class='back'>Android</span>
<span class='front'>T</span>
</span>
</div>
</div>
Here is the #temp_html:
<!--Stores cloned html to remove its style-->
<div id="temp_html"></div>
Here is the #show_html:
<!-- HTML Code display -->
<div id ="html-code-area" class="codearea">
<textarea id="show_html" cols="58" rows="20">
HTML will be displayed here
</textarea>
</div>
But when the clone is changed, it changes the original too. Is there a way to change the clone only without changing the original?
Also, the text in textarea keeps adding the same code again and again. How can I replace everything in the textarea with new contents?

I checked your code in a fiddle, - it works as expected with clone(), except that you remove the style attr from both nodes. You should select only the temp html:
$("#temp_html div.animation-1 span.front").removeAttr('style');
and about replacing the text in the textarea - you need to empty #temp_html before doing a new copy, like this:
$('#temp_html').empty();
The text inside #show_html is always replaced, it's just that #temp_html had several nodes attached.
here's the new fiddle: http://jsfiddle.net/WdTum/3/

Javascript InsertBefore - in a different div both within a parent div

I would like to insert an hr element in a different child div (2 child divs within a parent div), as per the set-up below. The insertbefore method works fine for an element within the same div but not for elements in the other child div (see code below). Is there a different method I can use to achieve this or do I want the impossible?
<body>
<div id="whole section">
<div id="group_a">
<h3 id="event_1">Heading 1</h3>
<p> some text </p>
**// I would like to insert an hr element here**
<h3 id="event_2">Heading 2</h3>
<p> more text </p>
</div>
<div id="group_b">
**// I can only insert code here though**
<script type="text/javascript">
function add_hr(){
var new_hr = document.createElement('hr');
var reference = document.getElementById('event_2');
document.body.insertBefore(new_hr, reference);
}
window.onload = function(){add_hr();};
</script>
</div>
</div>
</body>

insertBefore requires that the reference element be a direct child of the element on which you call it. Your line
document.body.insertBefore(new_hr, reference);
...tells the browser to insert new_hr before the reference element directly contained by document.body. But document.body doesn't directly contain the reference element, it's inside a div. So you get an error, because the reference element can't be found directly inside the element you're inserting into.
You can fix that by using the reference element's parent:
reference.parentNode.insertBefore(new_hr, reference);
Live Example | Source