Develop Reference

Can't see elements inside div in my HTML code?

I am working on an application that has a form on one of its pages. The form is enclosed in a bunch of nested div tags. It looks something like this:
<main id="main-body">
<div id="content-wrapper">
<div id="formContainer>
<div data-reactid=".0">
<div data-reactid=".0">
<div data-reactid=".0.0.1.$form">
<form id="myForm" data-reactid=".0.0.1.$form.1">
...
</form>
</div>
</div>
</div>
</div>
</div>
</main>
The trouble is that I can see the form on my webpage, and also through the 'View Source' function in my browser, but when I do an 'Inspect Element' to see the actual HTML being generated, I just see
<main id="main-body">
<div id="content-wrapper">
<div id="formContainer">
</div>
</div>
</main>
I can't see any of the HTML elements inside the div 'formContainer' when I do an 'Inspect Element', even though they are right there on the page. Any ideas as to why might this be? I need to get the form Id in Neoload, but Neoload just won't read it, since it's absent from the page's source.
Edit: Several of the div tags are using data-reactid=".0.0". The form element itself has data-reactid=".0.0.1.$form.1". Basically anything with react disappears. I know nothing of React. Could this be causing this issue? I have updated my code to match the original code more closely.

You are not closing the id="form-container"! A " is missing

I want to add html tag without ending tag

I want to add html tag without ending tag like that <div class="bottom-widget"> . For that I use jQuery prepend() method but full tag was added by this !
Html Markup -
<div class="widget">
<h2>this is content 1</h2>
</div>
</div>
Javascript Code :
$(".widget").prepend('<div class="bottom-widget">');

Perhaps you are looking for wrapInner function.
And you code will be:
$(".wrapInner").wrapInner("<div class='bottom-widget'>");

I assume you need correct html so after this opening tag you will have another with closing one. For this reason you can use jQuery wrapInner function (http://api.jquery.com/wrapinner/)
First extract(or create) the element you want to be wrapped in your bottom-widget element, than create bottom-widget element and insert above-mentioned element into it.

$(".widget").prepend("<div class='bottom-widget'></div>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
<h2>this is content 1</h2>
</div>

Cannot detect element by classname

I am a beginner and I am using pure javascript for DOM manipulation. I am not able to get all the divs in my section element. I get undefined. Please tell me what is the error and how I can fix it.
HTML
<section class="main-content">
<aside>
<p>
<span class="sidebartext">Watch this space for breaking news items.</span>
</p>
</aside>
<section class="notes">
<div id="Services" class="nav-pages active">Services</div>
<div id="Resources" class="nav-pages">Resources</div>
<div id="Contact-Us" class="nav-pages">Contact Us</div>
<div id="Company" class="nav-pages">Company</div>
</section>
</section>
JS
var navTabs = document.getElementsByClassName('notes').children;
console.log(navTabs);//undefined
No jQuery answers please !!!

getElementsByClassName returns an array of elements (actually, array-like - see #Hamms comment below), so children is undefined on it. If there's only one notes section, you can choose to use id="notes" instead (with getElementById) or iterate through the above array and access children from that.

That happens because getElementsByClassName returns an HTMLCollection or NodeList. If you console log just that element, "notes" you will see why you are getting an undefined.
Replace your JS code by:
var navTabs = document.getElementsByClassName('notes');
console.log(navTabs);
That will output an array which once expanded, it will show the content of the position [0]. If you expand that one you will get your NodeList labeled as childNodes. Expand it and you will get your divs.
Try this to get directly your divs:
console.log('Items: ',navTabs[0].childNodes);

image overwriting existing html objects

i tried to generate img tag with javascript
(when clicked on link, image is created)
The problem is that when the image is generated, all other objects(other images or text) are overwritten and i cannot reach them anymore
i have something like
document.getElementById("picturediv").innerHTML=picturetag;
in html
<div id="bigger">
<div id="picturediv"></div>
<div id="div for some other stuff"></div>
</div>

It should work, unless picturetag is breaking the html.
<div id="bigger">
<div id="picturediv"></div>
<div id="div for some other stuff"></div>
</div>
<script>
document.getElementById("picturediv").innerHTML="<img src='"+pictureLocation+"'>";

Assigning the innerHTML indeed "overwrites" any previous content of the element.
To append the image to the existing contents have:
document.getElementById("picturediv").innerHTML += picturetag;
Assuming picturetag contains valid HTML - if no luck please post more code especially what is picturetag and how it's created.

Try something like this:
document.getElementById('picturediv').appendChild(picturetag);
That will append the image to the div

(Javascript) Inserting elements dynamically in a specific position

Basically what I have is this:
<body>
<div class="class1">
</div>
<div class="class2">
</div>
<div class="class3">
</div>
...
</body>
I have no idea why the site creator used classes instead of IDs (they're unique), but it doesn't really matter as I'm writing a GM script and so getElementsByClassName('')[0] effectively does the same thing.
How can I insert an element between the first and second div?

Create your own insertAfter function

you can use JQuery it very simple
$(".class1").after( document.createTextNode("Hello") );