• General
    • Home
    • Contact Us
    • Privacy Policy
    • Sitemap
  • Photographs
    • 2018
    • 2017
    • 2016
    • 2015
  • Literature
    • Poems
  • News
    • Announcements
    • Charity
    • Legal
    • Medicine
    • Politics
  • Education
    • Code Samples
      • Basic
      • Simple
      • Intermediate
      • Advanced
      • Tips
    • History
    • Literature
    • Quotes
    • Videos
    • Vocabulary
  • Entertainment
    • Art
    • Humor
    • Photos
    • Video
  • Technology
    • Software
      • Support
      • Tweaks
    • Company
    • Science
    • Security
Major Mike

Knowledge is Power - Share the Power

Day: October 13, 2016

[TIP] Using PREPEND in Either jQuery or Pure JavaScript

October 13, 2016 by GµårÐïåñ

Question

I was asked a question today about how to do the same thing as prepend in jQuery but without loading and using that library, so bascially to do it in pure JavaScript.

For most programmers, this kind of “equivalency”, if you will, is often fairly easy to do and the reason we opt for libraries like jQuery is more for convenience and consistency than inability.

This is to show there is no magic to it (most of the time) and when you pull back the veil and understand what is happening, you realize that jQuery simply takes the pains of repetition and ugliness out of your code.

jQuery

...
// api.jquery.com/prepend/
// jQuery API Documentation | .prepend( content [, content ] ) | Returns: jQuery
// Syntax: $(selector).prepend(content,function(index,html))
// Description: Insert content, by parameter, to the beginning of each matched element.

var x = $('destination-object');
var y = $('source-object');
x.prepend(y);

...
// not too bad in jQuery

$('destination-object').prepend($('source-object'));

JavaScript

...
// www.w3schools.com/jsref/met_node_insertbefore.asp
// W3Schools | .insertBefore(newItem, .childNodes[0])
// Returns: A Node Object of the inserted node
// Syntax: node.insertBefore(newnode,existingnode)
// Description: Inserts a node as child, right before an existing child, which you specify.

var x = document.getElementById("destination-object");
var y = document.getElementById("source-object");
x.insertBefore(y, x.childNodes[0]);

...
// this is INSANE

document.getElementById("destination-object").insertBefore(document.getElementById("source-object"), document.getElementById("source-object").childNodes[0]);

For the love of all that is holly, don’t do these ugly one line chains please. Sacrifice a negligable amount of overhead and make your code more readable by expanding your syntax a bit to be more clear.

If for no other reason than to be self-serving and have an easier time debugging and detecting typos. Or, consider that you will type less in the long run which would actually make your code more efficient. If that wasn’t enough, consider that you will enjoy better logic flow and conceptualization as well.

Ultimately, to each their own, but hopefully this was a nice little token refresher. LLC away. — Mike


There should be no implication that jQuery is any less JavaScript, just that one is at its stock core and the other has extended functionality wrapped around it in a library that can expedite or shorthand a lot of what would be otherwise tediously long and ugly. That fact that a dedicated community of awesome people maintain the code all the time relieving you of having to constantly audit your code is just gravy.

Posted in: Tips Tagged: code, JavaScript, jQuery

Privacy Policy Update

October 13, 2016 by GµårÐïåñ

Privacy Policy Updated to v1.32c

– Summary
  • Updated the specifications regarding the upgraded/enhanced security of our SSL certificate to provide an even higher grade HTTPS protection on the site for everyone.
Posted in: Announcements, General Tagged: privacy update, updates
1 2 Next »

Show Your Support – We Don’t Believe in Disruptive Ads

Donate in one of two ways :
(BitCoin - preferred)
1BTshbqMSx5AHrDFLEa1YdPAy5EFzRSjr9
(PayPal)
October 2016
M T W T F S S
« Sep   Nov »
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Semper Fidelis

Always Faithful, Always Forward
United States Marine Corp

Places to find me:

StackExchange profile for GµårÐïåñ at StackExchange

CodeProject

Twitter : verified ➠Follow

GitHub ➠Follow @GuardianMajor

ello ➠

deviantArt profile for GµårÐïåñ on deviantArt

Facebook i have made a personal choice after their "name policy" witch hunt which repeats every 2 years it seems at the whim of the "bully mob" (even when they make you jump through hoops and verify you), to just quit it and be done with it, they are not worth my time. I don't need it, I don't miss it, in fact it has made my life more productive and void of gross hate, vitriol and drivel. To those who say they can't stay in touch if I am not on there, if you can't reach me because I am not on Facebook, then you are not trying AT ALL - therefore, good riddance.

Scribd profile for GµårÐïåñ on Scribd

NoScript/FLashGot (Informaction) profile for GµårÐïåñ on Informaction Forums

Subjects

vocabulary NASA 1980 1970 has_video 1933 1983 1946 1949 1865 1998 1917 1954 1919 1859 1995 1889 1956 1945 1944 1968 New York 1955 United States 1975 1986 1967 1962 1915 1934 1961 1918 1977 1981 1963 1911 1942 1989 1966 1965 1863 1937 1940 daily pic 1901 1943 1922 1935 1789 1776 holiday 1964 1960 has_audio 1990 event 1953 1976 1959 Soviet Union 1902 1993 1947 1969 1974 1957 1994 1870 1941 2000 1812 1952 1898 code 1982 1851 1939 1972 Germany 1914 1984 1985 1971 1916 memorial 1958 England 1991 1978 1979 annual 1973 1948 1950 1951 history 1846 national park 1938 1908

Archives

Access Options

  • Log in
  • Entries RSS
  • Comments RSS
  • ∞ Guardian International
🎔
Brought to You
by Guardian International

Copyright © 2007-2019 Major Mike | Privacy Policy | DMCA | Contact | About
fortitudo fortis defendit

McAfee SecureNorton by SymantecVirusTotal