Develop Reference

How to insert a div as the first element in a container with JavaScript

I have created a div with Javascript, this displays correctly, however it is not in the place where I want, I would like to put it inside a container as the first element. I'm not very good, I'm trying to learn, so sorry for the triviality of the question.
How do I put the div I created inside an already existing container as the first element?
Beyond that I would like to understand the logic of the operation, for example, how can I move the new div as the last element? Or as a second element ?
This is the Js code
// Add New Element
var newEl = document.createElement("div");
var text = document.createTextNode("Hello");
newEl.appendChild(text);
var element = document.getElementById("main_container");
element.appendChild(newEl);
This is what I am trying to achieve
<div id="main_container" class="something">
<div class="new_element">Hello</div>
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
</div>
This is what I got for now
<div id="main_container" class="something">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
</div>
<div>Hello</div>

This should work:
element.insertBefore(newEl, element.firstChild)

const parent;
const newFirstChild;
parent.insertBefore(newFirstChild, parent.firstChild);
In your case:
element.insertBefore(newEl, element.firstChild)
If you want to insert at a different index you can do it like this:
parent.insertBefore(newEl, parent.children[2])
Codepen

Remove div and its content from html string

Lets say i have a string like this:
<div id="div1"></div>
<div class="aClass" id="div2">
<div id="div3" class="anotherClass"></div>
<div id="div4" />
</div>
<div id="div5"></div>
I want to remove div2 from the string and everything inside that div
So i got a string like this
<div id="div1"></div>
<div id="div5"></div>
I thinking something like using regex to find the first div with the id of "div2" or whatever the id of the div is and count brackets untill it gets to "< /div>". The problem is that the "div3" also got a "< /div>" at the end.
The content of the div i want to remove may contain more or less div's then this too.
Any ideas on how to code this?
Update:
var htmlText = editor3.getValue();
var jHtmlObject = jQuery(htmlText);
jHtmlObject.find("#div2").remove();
var newHtml = jHtmlObject.html();
console.log(newHtml);
Why doesn't this return anything in the console?
Update2!:
I have made a jsFiddle to make my problem visual..
http://jsfiddle.net/WGXHS/

Just put the string into jQuery and use find and then remove.
var htmlString = '<div id="div1"></div>\
<div class="aClass" id="div2">\
<div id="div3" class="anotherClass"></div>\
<div id="div4" />\
</div>\
<div id="div5"></div>';
var jHtmlObject = jQuery(htmlString);
var editor = jQuery("<p>").append(jHtmlObject);
editor.find("#div2").remove();
var newHtml = editor.html();

If you have access to jQuery and your HTML is part of the DOM you can use $.remove()
EG. $('#div2').remove();
If it's not part of the DOM, and you have it in a string, you can do something like:
$('#div2', $(myHTML)).remove();

jQuery .remove() will do
$("#div2").remove();

The regex option would work if you control generating the string so you can ensure things like order of the attributes and indentation. If not your best bet is to use an HTML parser. If you are working inside of a browser jQuery is a good option. If you are working server-side you'll need to find a parser for the language you chose.

Randomize div id order

I'm trying to get some divs with an id to randomize the order they appear in. I've found a script that supposedly will do this, but for the life of me, I can't figure out why mine isn't working.
Basically, when the page loads the HTML will read like this:
<div class="main">
<div id="box">1</div>
<div id="box">2</div>
<div id="box">3</div>
<div id="box">4</div>
</div>
But the code when applied will randomize the order in which they appear (in the browser), like so:
<div class="main">
<div id="box">3</div>
<div id="box">1</div>
<div id="box">4</div>
<div id="box">2</div>
</div>
And here is the javascript that supposedly is making it all work:
function reorder() {
var grp = $(".main").children();
var cnt = grp.length;
var temp,x;
for (var i = 0; i < cnt; i++) {
temp = grp[i];
x = Math.floor(Math.random() * cnt);
grp[i] = grp[x];
grp[x] = temp;
}
$(grp).remove();
$(".main").append($(grp));
}
I thought it was because I had an id property, but even if I strip that out and just make it a plain old div tag, it doesn't work :/
Here is the the like to a js fiddle of the code in question...
js fiddle
There are a few questions here similar to this, but they're all older topics, so I hope no one minds my making a new one. I'm still pretty new to javascript, if that isn't already obvious :D

Just change
<div class=".main">
<div id="#box">1</div>
<div id="#box">2</div>
<div id="#box">3</div>
<div id="#box">4</div>
</div>
to
<div class="main">
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
</div>
Two errors :
the ".main" which should be "main" as you look for $(".main").children().
the id "#box" that you were using for more than one element
In your fiddle, you also forgot to import jQuery.
Demonstration (click "Run with JS")

First, as was said before, ID should be unique, and they don't start with a #. The selector for ids uses a #.
Same for classes, they should start with a letter, only the selector uses a dot.
Now for your fiddle. You visibly use jQuery, here, so include jQuery on your fiddle, in the menu on the left.
Then, what you are doing in your fiddle is defining a function, but you never call it.
Just add a call to your function at the end of your code (that will be called by jsFiddle on load of the document, like this:
reorder();
Worked for me on your fiddle.

How replace to same class names with foreach/each?

I have to convert plain text urls to . I've found a JS code that works. My problem is that my HTML structure needs that I modify the code, putting the current code inside a foreach.
My html:
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
The JS:
$(function()
{
var re = /(https?:\/\/(([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?))/ig;
$('.content').html($('.content').html().replace(re, '$1'));
});
The above JS works, but will populate all the div's with the same content. I've tried to put this code in a foreach but have failed. My poor JS knowledge makes me ask this on SO.
Can you give some clues on how to put this code in a foreach loop?

Functions like .html allow a function to be passed. An .each loop is then done internally, and moreover you get the current value passed:
$('.content').html(function(i, current) {
return current.replace(re, '$1');
});

.html() for retrieval only selects the first matched element. You can do this pretty easily, though, because functions like .html can take a function argument for setting that iterates over each selected element individually.
$(".content").html(function (_, html) {
return html.replace(re ...etc...);
});

If I've understood your question correctly, you need to loop through each .content div, try this:
$('.content').each(function() {
var $content = $(this);
var re = /(https?:\/\/(([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?))/ig;
$content.html($content.html().replace(re, '$1'));
});

Search Text and Replace with JavaScript

Example I've this code:
<div class="description"> I make you smile. </div>
Transformed to:
<div class="description"> I make you think. </div>
Note: "smile" was replaced to "think"
How can I replace it, using javascript jQuery? It's possible to change several words?

var ele = $("div.description"); //Let ele be target element
ele.html(ele.html().replace(/smile/gi,"think")); //Replace the word in string,
// then put it back in.
.replace: MDN
Demo: http://jsfiddle.net/DerekL/FdyEH/