We Keep Coding

jQuery prepend on clone inserting at unexpected location

I'm trying to copy the contents of a DIV and insert a heading before the copy. However, the heading gets inserted at the wrong point.
var reference = $('#reference').clone().contents();
reference.prepend('<h1>Heading</h1>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="reference">
<ul>
<li></li>
</ul>
</div>
I want the heading to go before the <ul> but instead it gets inserted after before the first li.
So it looks like this:
<div id="copy">
<ul>
<h1>Heading</h1>
<li></li>
</ul>
</div>
Instead of this (what I want):
<div id="copy">
<h1>Heading</h1>
<ul>
<li></li>
</ul>
</div>
This is probably a really basic question but a few hours of trying prependTo(), before(), insertBefore() and searching online have not gotten me any closer. Thanks :)

Firstly remove contents() as you want to clone the whole element, not its children. Secondly, create the h1 tag, then use prependTo() to place it at the desired location in the cloned element.
Also note that your current code results in duplicate id attributes in the DOM, which is invalid. I'd suggest making the #reference id in to a class instead. Try this:
var reference = $('.reference:first').clone();
$('<h1>Heading</h1>').prependTo(reference);
$('body').append(reference);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reference">
<ul>
<li>Foo</li>
</ul>
</div>

Use it like this I have tried and It is working fine.
$('#reference').clone().contents().parent().prepend('<h1>Hea‌​ding</h1>')

Getting the position of a Node in de Dom

i'm using MutationObserver to observe the DOM for insertions or changes of the DOM. But what I want to achieve additionally, is to reproduce the DOM changes in some kind of backend.
Lets say I have the following DOM:
<div class="container">
<div class="row marketing">
<div class="col-lg-6">
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
</div>
</div>
</div>
On click on a button, the corresponding parent li gets a new child element (h1, div, span, whatever). Now the MutationObserver gets fired, and I can get information on the added element (and maybe the children).
For some kind of replay though, I want to get the excact position of the parentNode of the inserted element.
Lets say I press the button of the second element, the DOM changes to
<div class="container">
<div class="row marketing">
<div class="col-lg-6">
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
<span>Example text</span> <!-- Node has been added -->
</li>
<li>
<h4>Text</h4>
<p>More Text</p>
<button class="add-stuff">Add Element</button>
</li>
</div>
</div>
</div>
Now, what I need, is the excact position of this node. For example
div.container > div.row.marketing > li[2]
What I can't rely on are ID or something like this. I want to use this script on sites, where I don't have control over the DOM, or where is a lot of dynamic data, which makes it very inconvenient to add a unique ID to every element.
I have looked into XPath, which obviously isn't supported natively in javascript.
Does anyone has an idea how to achieve this?

Javascript many classes selection

I´ve got code:
<div class="gridContainer clearfix">
<div id="content">
<ul class="accordion" id="accordion">
<li class="bg4 bleft">
<div class="heading">Hello!</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Title</h2>
<p>text</p>
</div>
</li>
</ul>
</div>
</div>
and I need to change text on Hello! on Title and on text. How I could select tags with multiple classes and id's? the codes:
document.getElementsByClassName('bg4 bleft heading').innerHTML="bla";
document.getElementsByClassName('description').innerHTML="bla";
doesn´t work
Thanks!

Use :
document.getElementsByClassName('accordion bg4 heading').innerHTML="bla";
You need not add same classes of a particular html element as you did, but rather use a hierarchal way like above so that you can pin-point the element you need to focus.

How to get content between div

I have one ul li list and I want to put that content between ..
What I have
<div id='a'>
<ul>
<li>
<li>
<li>
</ul>
</div>
what I want to do is that using jquery I want to add div before and after this content like this
What I want
<div id='a'>
<div id='b'>
<ul>
<li>
<li>
<li>
</ul>
</div>
</div>
What I am using is append or before but not getting properly result.
I used following code.
$("#a").prepend("<div id='b'>");
$("#a").append("</div>");
But I got result like this.
<div id='a'>
<div id='b'></div>
<ul>
<li>
<li>
<li>
</ul>
</div>
please help me.

You can use .wrap() to do this:
$("ul").wrap("<div id='b'></div>");
Demo Fiddle

Use wrap()
This will exactly do what you want:
$("#a > ul").wrap("<div id='b'></div>");
Look at the doc: http://api.jquery.com/wrap/

Try this
$("ul").wrap("<div id='b'></div>"); and here is the working example

jQuery UI Accordion on ul

How do I get the jQuery UI Accordion to work when I need to put a wrapper around each element?
Example HTML:
<ul>
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
</ul>
I just can't seem to get it to work.

You cannot make the accordion work with your current markup. Elements must be siblings like this:
<div id="parentAccordionDiv">
<h3>header</h3>
<div>
Content goes here
</div>
<h3>header</h3>
<div>
Content goes here
</div>
</div>
I stand corrected. I got an accordion to work fine like this:
<script type="text/javascript">
$(function(){
$('#accordion').accordion();
})
</script>
<ul id="accordion">
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
</ul>