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

Select child element from parent - Plain Javascript

I need some help with Javascript.
What I try to do is move an element to another element.
Normaly I can use the queryselector but in this case I can not because there are multiple elements with the class "destination". To get the result what I want I need select first the parent element "catalog-item" and after that the child "destination".
I need some help to get the right element catalog-item->destination
<div id="catalog-item">
<div class="destination">
</div>
</div>
<div id="move"></div>
<script type="text/javascript>
var itm = document.getElementById("move");
var cln = itm.cloneNode(true);
itm.remove();
document.getElementById("catalog-item").children(".destination").appendChild(cln);
</script>
Who can help me?

You can select the child element with querySelector by writing document.querySelector("#catalog-item .destination"). Just put a space between them.

How to overlay a div over 2 others div with JS/Jquery

I have a couple of <div> like this:
<div>
<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
</div>
How can I create dynamically another div to cover div#1 and div#2 in JS or jQuery ?
<div id='event'>EVENT</div>
Thanks.

You can use wrapAll function provided by jQuery like
$("#1, #2").wrapAll( "<div class='new' id='event'>EVENT</div>");
.new{
color : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<div id='1'>1..</div>
<div id='2'>2..</div>
<div id='3'>3..</div>
</div>
The .wrapAll() function can take any string or object that could be passed to the $() function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. The structure will be wrapped around all of the elements in the set of matched elements, as a single group.
Here for more details

I found this on Mozilla's doc page, describing the outerHTML attribute.
https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML
After you get the parts of the code you want to wrap, reassign it with a <div> on the front side of 1 and a </div> on the back side of 2.
d1 = document.getElementById('1');
d2 = document.getElementById('2');
d1.outerHTML = '<div>' + d1.outerHTML;
d2.outerHTML = d2.outerHTML + '</div>';

How to turn string into HTMLCollection

I have static html stored in javascript string literal templates.
On button click, (modal popup) I need to pass the stored static html through a function and update elements in it with dynamic data that gets stored in a hidden div.
I need the html static string to become a HTML Collection, so I can perform jQuery functions on it for finding and replacing elements in it with the dynamic content stored in the hidden divs.
How do I do that?

var htmlString = "<div class='abc'><p>Lorem <strong>ipsum</strong> dolor sit amet..</p></div>";
var html = $(htmlString);
It creates an element wrapped in jQuery, so you can perform it's methods on it and when you're finished, you can append() it to your modal.

Let's say var HTMLAsString = "<div id="dynamicDivId">This is paragraph</div>" is the HTML which you want to add to modal
<div id="modalDivId">
<div id="hiddenDivId">some data</div>
</div>
To get following output
<div id="modalDivId">
<div id="hiddenDivId">some data</div>
<div>some data</div>
</div>
You can do something like this
var dynamicDivSelector = $(HTMLAsString);
dynamicDivSelector.text($("#hiddenDivId").text());
$("#modalDivId").append(dynamicDivSelector);

To answer your question in the comments as to how to accomplish this in plain JavaScript, you'd need to do the following:
var newDiv = document.createElement('div');
newDiv.className = 'foo';
var markup = '<p>blah blah blah...</p>';
newDiv.innerHTML = markup;
You can then do whatever you need to do with the new node, and insert it to the DOM with something like:
document.body.appendChild(newDiv);

get respective div element under same class using jquery

I have a main document div to add some html element through variable "str"
<div id='documentDiv'></div>
I have a functionality which will add some html element to my #documentDiv.
var str="<div class='customElement'></div><a href='' onclick='append(event);'>append</a>"
And I have a functionality to append str to documentDiv as many time I want:
$('#documentDiv').append(str);
after appending two times I have the same structure appended twice inside my documentDiv element
<div id='documentDiv'>
<div class='customElement'></div><a href='' onclick='append(event);'>append</a> // want to append some text to respective .customElement div
<div class='customElement'></div><a href='' onclick='append(event);'>append</a>
</div>
My problem is with onclick ,i want to append something inside the respective div under customElement class.But with onClick ,it always gets appended to the first div.How can i get respective div element using jquery?
function append(event){
$('.customElement').append("some text");
}

Maybe this could help you:
Without a-tag:
$('.customElement').bind('click',function(){
$(this).append("some text");
});
or with a-tag:
$('.customElement a').bind('click',function(){
$(this).parent().append("some text");
});

I believe you want to use this.
function append(event){
$(this).append("some text");
}

Since you are adding your elements dynamically you should delegate the events by adding the on method to the parent element.
Here is an example.
function append(event){
$(this).prev().append("some text");
event.preventDevault();
}
$('#documentDiv').on('click', 'a', append);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id='documentDiv'>
<div class='customElement'></div><a href='#'>append</a>
<div class='customElement'></div><a href='#'>append</a>
</div>