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

add all links in div to another div with break using jquery

I'm trying to take the links from div links and add them to div links2 keeping the links in div links the way they are and the links in div links2 with a <br /> after each link
What are you talking about!?!
ok lets take a look:
HTML:
<div id="links">
one
two
three
</div>
<div id="results"></div>
<div id="links2"></div>
JS:
var elements = $('#links a');
$('#results')
.text('there are ' + elements.length + ' links');
$('#links2').append(elements)
ok so ignore the results div, this is just showing how many links there are total.
right now i have append, which is completely removing the links from div links. how can I make it so it just adds the links to links2 with a br between each link.
So the final output would print something like this:
<div id="links">
one
two
three
</div>
<div id="results">there are 3 links</div>
<div id="links2">
one<br />
two<br />
three<br />
</div>
updated fiddle:(need to add br still)
http://jsfiddle.net/upLg4/44/

You have to .clone() it before appending to other element,
$('#links2').append(elements.clone())
DEMO
The object elements is referring a group of anchor tags inside div#link, so normally append will shift the elements from one place to other when it encounters an object referring other elements/a selector. That is why we have to clone it manually.

Use after() method to add <br> after each link like following.
var elements = $('#links a');
$('#results').text('there are ' + elements.length + ' links');
$('#links2').append(elements.clone());
$('#links2 a').after('<br />'); // use this line to add <br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="links">
one
two
three
</div>
<div id="results"></div>
<div id="links2"></div>

jQuery .before() doesn't insert content as I defined it

I have following HTML
Html
<aside>
<section class="links"></section>
<section class="downloads"></section>
<section class="news"></section>
<section class="contact"></section>
<aside>
I'm trying to insert </aside><aside>before section.news (effectively splitting the aside container tag in 2 aside containers with 2 sections in each)
jQuery
I use:
$("aside section.news").before("</aside><aside>");
Problem
Jquery always prints <aside></aside> instead of </aside><aside> like I want.

DOM elements are not strings, you can't add elements in that way using JavaScript, DOM elements are JavaScript objects, jQuery behind the scenes calls createElement() method of the document object which creates a DOM HTMLElement object, it doesn't add strings to the document.

Here is the "proper" way of doing it:
Create an aside element
Insert it after the existing aside element
Move desired elements inside it
var $aside1 = $("aside:first");
var $aside2 = $("<aside><\/aside>").insertAfter($aside1);
$(".news").nextAll().addBack().appendTo($aside2);
Demo here

$('</aside><aside>').insertBefore('.news');
As
<aside>
<section class="links"></section>
<section class="downloads"></section>
</aside><aside>
<section class="news"></section>
<section class="contact"></section>
<aside>
Reference about .insertBefore

$(document).ready(function(){
var one = $('aside').children().eq(0).clone().wrap('<p>').parent().html() + $('aside').children().eq(1).clone().wrap('<p>').parent().html()
var two = $('aside').children().eq(2).clone().wrap('<p>').parent().html() + $('aside').children().eq(3).clone().wrap('<p>').parent().html()
$('aside').before('<aside>'+one+'</aside');
$('aside').eq(1).html(two);
console.log(one)
console.log(two)
});

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.

how can content between a class put in a variable after click?

How do I retrieve the content between and including the following <div class="adding"> and store it in a variable?
<div class="adding">
<b>
<div class="column">
<div class="mediumCell">
<input type="text" name="name" placeholder="توضیح" title="نام پکیج تور خارجی">
</div>
</div>
<div class="column" style="margin: 5px 3px;">
<div class="mediumCell">
<div class="adda">
</div>
</div>
</div>
</b>
</div>
var adding = '<div class="adding"><b><div class="column"><div class="mediumCell"><input type="text" name="name" placeholder="توضیح" title="نام پکیج تور خارجی"></div></div><div class="column" style="margin: 5px 3px;"><div class="mediumCell"><div class="adda"></div></div></div></b></div>'
In each click I want to get the content just once.
Unfortunately, after two or more clicks getting content several times together (E.x: after two clicks it stores the content twice).
I tried this:
$(function () {
var i = $('.adding').size();
$('.add_input').live('click', function () {
var scntDiv = '.' + $(this)
.closest('.find_input')
.find('div')
.attr('class');
var input = $(scntDiv).html();
$(this).remove();
$(input).appendTo(scntDiv);
i++;
return false;
});
});

You can use the html() method, as others have said, but there's a catch: that method returns the inner HTML content of the element, so the markup of the outer <div> element won't be included in the result.
Since you seem to want that markup, you can work around the issue with clone(), wrap() and parent():
var adding = $("div.adding").clone().wrap("<div>").parent().html();

You can get the inner HTML using the html function:
var adding = $(".adding").html():
...which will give you the browser's version of the markup within the first matching div (the first div with the class "adding"). It's fairly simple at that point to wrap it with the markup for the div, unless there are a lot of chaotic attributes involved.
However, note that the markup you get back may not be what you expect, because your HTML is invalid. b elements cannot contain div elements (b elements may only contain phrasing content; div elements are flow content), and so the browser adjust things as it sees fit to display something reasonable. This is a Bad Thing(tm), it's much better with dynamic web apps to ensure that your HTML is valid.

Is that what you're asking for ?
var adding;
$('.adding').click(function(){
adding = $(this).html();
alert(adding);
});

var adding = $(".adding").html();
maybe?