Develop Reference

With jQuery, how do you add an element before another element without making copies?

I have a situation where I need to add a sibling element to a jQuery object that is stored in a variable. I need the added element to be the previous sibling of that jQuery object.
The simplified version would look something like this https://jsfiddle.net/sjncgaLf/4/
$(document).ready(function() {
var test = $('<div class = "test">test</div>');
var el = $('<div class = "el">el</div>');
//I want to add el before test (without making a copy)
//and then append the selector (el + test) to the DOM
el.before(test);
$("body").append(test);
});
Clearly, based on the jsfiddle, this code does not achieve the desired affect. My goal is to achieve a result like this
<div class = "el">el</div>
<div class = "test">test</div>
Without copying the original elements. I've read the .before, .insertBefore, and .add documentation thoroughly, and it looks like none of those will produce exactly what I want here.
Thanks in advance.
EDIT:
I suppose need to be more clear. I'm making a calendar 1 month at a time. I need to start with a variable like $markup, and add weeks to it until I've added each day in the month. I also need to add a label to the month, like "July, 2016". So, before I append any weeks to my $markup variable, or append anything to the DOM, I want my $markup to look like this
<div class = "label">July 2016</div>
<div class = "CalendarWeek"></div>
I'll then iterate over the days of that month and add as many CalendarWeek and CalendarDay as need be.

try like this.
$("body").append(el,test);
the updated fiddle : https://jsfiddle.net/sjncgaLf/14/

You can do that using the jQuery - insertBefore method.
I have updated your jsFiddle
$(document).ready(function() {
// create elements
var test = $('<div class = "test">test</div>');
var el = $('<div class = "el">el</div>');
// add the first element
$("body").append(test);
// insert the second element
el.insertBefore(test);
});

Based on your update, you just need to edit your variable, not worry about appending data in order.
So for your $markup variable, if it already has data and you want to add your month label at the beginning, just use:
$temp = $label + $markup;
$markup = $temp;
To add weeks or day data to the end of your $markup variable, just use:
$markup = $markup + $day;
Once you've got the entire variable built the way you like you can use jQuery to append it where you want.

jQuery trying to build up and then append HTML

I've put a much simplified example on jsFiddle.
Basically, I'm trying to build up my HTML and then append the whole thing once I'm done. The JS looks like this:
var label = 'My label',
var checkbox = $('<input type="checkbox">').prop({
id: 'checkboxId',
name: 'checkboxId',
checked: visible
});
listItem = ('<li class="customise_option"><label>'+checkbox+' '+label+'</label></li>');
$('#mylist').append(checkbox);
$('#myotherlist').append(listItem);
Appending just checkbox is fine, but if I try to include checkbox within my listItem variable then I just get:
[object Object] My label
So, on it's own jQuery is fine with appending my checkbox as a string, but when I try to do anything with that it treats it as an object.
Having looked around there are some similar questions, but as I'm creating everything in JavaScript (rather than manipulating something that already exists in the DOM) it seems there must be a way to do what I want. Problem is I can't figure it out.
EDIT
I simplified my original example too much, not understanding the problem fully. I have updated the jsFiddle to show that on my checkbox I need to be able to add a bunch of properties. So, the checked property will be reliant on something else. As such, I need $ so I can access jQuery's prop function (I think).

var label = 'My label',
checkbox = '<input type="checkbox">';
listItem = '<li class="customise_option"><label>'+checkbox+' '+label+'</label></li>';
$('#mylist').append(checkbox);
$('#myotherlist').append(listItem);
Here's the jsfiddle. If you're adding HTML markup, all you need are strings; you weren't far away.

checkbox is a jquery object, when you say string + checkbox you're casting checkbox to a string (which gives [object Object]) and then appending it. you need to use append() there as well.

Its because checkbox = $('<input type="checkbox">') returns a jquery object.
Either stick to jquery objects and use methods like text() etc, or stick to appending string representations of HTML. Just dont mix it.

This happens because the checkbox is an object.
With this code, works
var label = 'My label',
checkbox = '',
listItem = ''+checkbox+' '+label+'';
$('#mylist').append(checkbox);
$('#myotherlist').append(listItem);

i am trying to get value of particular hidden input text box using jquery it's not working

i tried before insert this
var req=$('#'+investor_id+'#requestId');
var requestId=document.getElementById(req).value;
alert(requestId);)
code it's it's working fine but after it's not working, here is code

You should change your code a bit: http://jsfiddle.net/rkw79/9fTPh/17/
That fiddle cleaned up your code slightly, but you should normally take this steps:
1) hit the 'tidyup' button, then look for missing });
2) don't use id's if they're not unique, just use class
3) you do not have to set an id on everything just to find it, all objects are relative to each other

Why don't you access element with its id instead of writing pipings. ID values are unique in document.
Try this code
alert($('#requestId').val());
//Check here for working demo http://jsfiddle.net/9fTPh/6/
Instead of
var req=$('#'+investor_id+'#requestId');
var requestId=document.getElementById(req).value;
alert(requestId);
And in the fiddle you have provided code us },) are not correctly given.(Check with JsLint)

How insert an input field in a table cell?

Sorry for the noob question: I want to create a table with input fields where the can add new ones, if they are needed. But I can'T figure out how add another input field inside a cell where another input field already exists.
My code is:
var par=obj.parentNode;
while(par.nodeName.toLowerCase()!='tr')
{ par=par.parentNode; }
// this gives me the index of the row.. works fine.
cell1=document.getElementById('avz_tabelle').rows[par.rowIndex].cells;
// this puts the content of the cells into the array "cell1"
var feld = cell1[1].createElement("input");
feld.setAttribute("name","avz_keywords" + avz_array + "[]");
feld.setAttribute("onblur","");
feld.setAttribute("type","text");
feld.setAttribute("size","30");
// Now I create a input element
// And now comes the problem:
cell1[1].appendChild(feld); // --> doesn't work
Has anyone a suggestion for me?
I got the idea to work without a table, theoratically that would work with my way. But that wouldn't be satisfying :/

If you look in a debugging console, you should see something like
TypeError: Object #<HTMLDivElement> has no method 'createElement'
Instead of creating the element from cell1[1], use document.createElement()
var feld = document.createElement("input");

You should use document.createElement("input"); instead of cell1[1].createElement("input");
As always (and as also stated in another answer here), the JavaScript console should be the first place to look for hints on what the problem is!
And wouldn't it actually be much easier if each table cell you want to add values to got a separate ID? Something containing perhaps the row index and the column index ... Then you could just select it directly.

Writing to a non-unique div with Javascript

I'm building a multi-feed RSS reader for school.
aList is the div that encompasses each individual feed (the amount of feeds will fluctuate).
theTitle is the div that will be filled with the attribute of the current feed. Additionally, if clicked, it will load a list of attributes from the current feed into theContent.
I'm wondering how I can dynamically load the attributes into theContent when theTitle is clicked, since theContent and theTitle are going to be non-unique divs (I can't give them IDs).
Thanks for your help in advance,
-Andrew

document.getElementsByClassName('aList').getElementsByTagName('div')

You should look into jQuery selectors for that and other DOM Manipulation. Something like
$("div.theContent").attr("name", "value");

by using jquery, you may use code like the following:
$(".theTitle").bind("click", function(){
$el = $(this);
$el.parent().$(".theContent").load('ajax/content.php?news=' . $el.text());
});
this will make all your links clickable, an on click, update their corresponding content divs with the value of ajax/content.php?news=theTitle-value

Use a nice Javascript library such as Prototype or jQuery. Seems petty now, but these frameworks save you tons of time in the long run.
In both frameworks, you can select that div with:
$('div.theTitle')
With jQuery, you can do:
$('div.theTitle').click( function() {
var title = $(this).text();
var contentDiv = $(this).siblings('div.theContent');
// Do something with contentDiv and the title
} );
This will make every theTitle div have an onClick event that does something with its associated theContent div.

<div class="aList">
<div class="theTitle" onclick="fillContentBox(this)"></div>
<div class="theContent"></div>
</div>
And in your script ...
function fillContentBox(div) {
var theContentDiv = div.parentNode.getElementsByTagName("div")[1];
// statements that do things with theContentDiv
}

You have to be able to determine which element you want to update if you don't want to update more than one. If the elements are grouped inside something else that does have an "id" value, you can take advantage of that.