We Keep Coding

What are the equivalent of after and before jQuery's function in native javascript?

I always used jQuery before, but I want to switch the following to native javascript for better performance of the website.
var first = $('ul li:first');
var first = $('ul li:last');
$(last).before(first);
$(first).after(last);

From: http://clubmate.fi/append-and-prepend-elements-with-pure-javascript/
Before (prepend):
var el = document.getElementById('thingy'),
elChild = document.createElement('div');
elChild.innerHTML = 'Content';
// Prepend it
el.insertBefore(elChild, el.firstChild);
After (append):
// Grab an element
var el = document.getElementById('thingy'),
// Make a new div
elChild = document.createElement('div');
// Give the new div some content
elChild.innerHTML = 'Content';
// Jug it into the parent element
el.appendChild(elChild);
To get the first and last li:
var lis = document.getElementById("id-of-ul").getElementsByTagName("li"),
first = lis[0],
last = lis[lis.length -1];
if your ul doesn't have an id, you can always use getElementsByTagName("ul") and figure out its index but I would advise adding an id

I guess you are looking for:
Element.insertAdjacentHTML(position, text);
Where position is:
'beforebegin'.
Before the element itself.
'afterbegin'.
Just inside the element, before its first child.
'beforeend'.
Just inside the element, after its last child.
'afterend'.
After the element itself.
And text is a HTML string.
Doc # MDN

You can use insertBefore():
var node = document.getElementById('id');
node.parentNode.insertBefore('something', node);
Documentation: insertBefore()
There is no insertAfter method. It can be emulated by combining the insertBefore method with nextSibling():
node.parentNode.insertBefore('something', node.nextSibling);

How to clone an element using class name and append it to the body

I am trying to learn how to clone an element using classname and append it to the body.
here is what i have done but i am not getting any output. is there anything wrong ?
HTML:
<div class="check">hello</div>
CSS:
.check {
top: 100px;
}
JavaScript:
var elem = document.getElementsByClassName('.check');
var temp = elem[0].clonenode(true);
document.body.append(temp);
JSFiddle Link:
http://jsfiddle.net/hAw53/378/
if not JS, jquery solution is also welcomed.

You were almost there:
var elem = document.getElementsByClassName('check'); // remove the dot from the class name
var temp = elem[0].cloneNode(true); // capitalise "Node"
document.body.appendChild(temp); // change "append" to "appendChild"
<div class="check">hello</div>

You have 3 errors. Correct code:
var elem = document.getElementsByClassName('check'); // check, not .check
var temp = elem[0].cloneNode(true); // cloneNode, not clonenode
document.body.appendChild(temp); // appendChild, not append
Demo: http://jsfiddle.net/hAw53/379/

There are a few issues with your code.
getElementsByClassName() takes a class name (check), not a selector (.check)
cloneNode() is spelled with a capital N (not clonenode())
appendChild() is the name of the DOM method for appending a child (not append())
Correct version:
var elem = document.getElementsByClassName('check');
var temp = elem[0].cloneNode(true);
document.body.appendChild(temp);

You can do:
$('.check').clone().appendTo('body');
You're code had errors. First you used class selector and not the class name. Then you used an undefined property(properties are case sensitive) and you've to use appendChild instead of append which is a part of jQuery. You're too much confused with native javascript and jQuery.

in Jquery it's very simple, you just need to define inside what the new element apears.
var elem = $('.check');
elem.clone().prependTo( "body");

methods for dynamically created divs

So I'm working on creating a web app that allows users to create a front end theme for a website; I'm mostly doing this to better my JS skills.
What I'm doing in the code below is creating "boxes" that span the width of the page, and I want to allow the user to edit each individual box.
The issue I'm facing is I can select the class/id that the user clicked along with the div I have set up for all the elements that the user wants; however I cannot seem to attach any DOM methods onto the object.
Errors are Uncaught TypeError: Object editBoxes has no method 'innerHTML' where 'innerHTML' can be any method. I've also tried Jquery's .html with the same result.
for(i=1; i <= boxes; i++) {
box.innerHTML = box.innerHTML + [
"<div class = 'globalBox' id = 'box"+i+"'>",
"<div class = 'editDyBox'>edit this box <div class = 'editBoxes'></div<!--end edit boxes--></div>",
"</div><!--end box-->",
].join('');
}//end for
$(".globalBox").css("width", width+"%");
$(".editDyBox").click(function(){
var parentClass = $(this).parent().attr("id");
var childClass = $(this).children().attr("class");
var customEdit = $(this).attr("class");
var editBoxForm = "<form class = 'editBoxForm'><input type = 'text' name = '"+parent+"' width = '100%'></form>";
childClass.innerHTML("hello")
});//end editdybox click
Thank you
-Art

Why don't you use contenteditable instead of your complex code?
It's designed for that.
Check out this Demo
<div contenteditable="true">I'm the content</div>
It's supported by ALL browsers (yeah, even IE5)
its a normal div, so it spans all the available width, and his content is editable. No JS or CSS nedded.

This line returns a string, not a jQuery object
var childClass = $(this).children().attr("class");
So your variable childClass is going to just be a simple string object. It will never have the method innerHTML.
Additionally, this will return only the first child's class value and not an array of class values.

What about using one click handler per element?
var boxes = 3;
var $boxes = $("#boxes");
$.each(new Array(boxes), function () {
var box = $("<div/>").appendTo($boxes),
editBox = $("<div/>").text("edit this box").appendTo(box),
editBoxForm = $("<div/>").appendTo(editBox);
editBox.click(function () {
editBoxForm.html("hello");
});
});
jsFiddle Demo

Remove this
childClass.innerHTML("hello")
By this
$(this).children().innerHTML("hello");

Access a label's attribute using jquery

I have some data coming from the server in which I fill A Div in the Html page with.
The way I write the div is as follows:
<div class="BigDiv"><label class = "AttList" Std_Id="' + Std_Id + '">' + Std_Name +'</label></div>
Now, I want the data inside this div.
There are some other labels inside the div so I use this.children to access this label.
var labels = $(this).children('div');
var StdName = this.children[0].childNodes[0].nodeValue;
I want to access the Std_Id inside the Std_Id attribute, but I don't know how to do it ... Do you have any ideas?
Thanks.

Assuming that $(this) is a reference to the .BigDiv element:
var StdName = $(this).find('label').attr('Std_Id');
Or, similarly, and with the assumption that this is the .BigDiv element:
var children = this.childNodes;
for (var i=0,len=children.length; i<len; i++){
if (children[i].nodeType == 1 && children[i].tagName.toLowerCase() == 'label'){
var StdName = this.getAttribute('Std_Id');
}
}
References:
jQuery:
attr().
find().
JavaScript
element.getAttribute().
node.nodeType.
tagName.
toLowerCase().

Use getAttribute:
var labels = $(this).children('div');
var StdId = this.children[0].getAttribute("Std_Id");
Note that, according to the HTML5 spec, custom attributes should start with data-, though most browsers can tolerate it.

To save elements, which were selected using a jQuery-Selector, do this:
$labels = $('.BigDiv').find('label');
Now you can loop through each label with jQuery's foreach loop:
$.each($labels, function() {
var std_id = $(this).attr('Std_Id');
// do something with std_id
});

You could use the attr method as such,
var value = $('.AttList').attr('Std_Id');
EDIT
OK, so you for your implementation, you need to do this...
var value = $(this).find('.AttList').attr('Std_Id');
Assuming that this is the div or the parent of that div

jQuery get attributes and values of element

Say I have this HTML code:
<img id="idgoeshere" src="srcgoeshere" otherproperty="value" />
I can reference the element by its id: $('#idgoeshere')) Now, I want to get all the properties and their values on that element:
src=srcgoeshere
otherproperty=value
Is there some way I can do that programmatically using jQuery and/or plain Javascript?

You can get a listing by inspecting the attributes property:
var attributes = document.getElementById('idgoeshere').attributes;
// OR
var attributes = $('#idgoeshere')[0].attributes;
alert(attributes[0].name);
alert(attributes[0].value);
$(attributes).each(function()
{
// Loop over each attribute
});

The syntax is
$('idgoeshere').attr('otherproperty')
For more information - http://api.jquery.com/attr/

Yes you can!
Jquery:
var src = $('#idgoeshere').attr('src');
var otherproperty = $('#idgoeshere').attr('otherproperty');
Javascript:
var src = document.getElementById('idgoeshere').getAttribute('src');
var otherproperty = document.getElementById('idgoeshere').getAttribute('otherproperty');

You can use attr for that:
For eg.
var mySrc = $('#idgoeshere').attr("src");
var otherProp = $('#idgoeshere').attr("otherproperty");

If you want to just get a list of all the attributes, see the answers to this question: Get all Attributes from a HTML element with Javascript/jQuery

Try this:
var element = $("#idgoeshere");
$(element[0].attributes).each(function() {
console.log(this.nodeName+':'+this.nodeValue);});