A few weeks back I touched on a handful of Mozilla-specific CSS properties that I found to be interesting. This week I’d like to share a few WebKit-specific CSS properties that make me all tingly inside.

-webkit-touch-callout

The -webkit-touch-callout property allows you to dictate what does or doesn’t happen when a user taps and holds on a link on iOS. The default value is default and tap-holding on a link brings up the link bubble dialog; by using the value of none, that bubble never comes up.

a.js-only {
	-webkit-touch-callout: none;
}

This would be very useful on apps that use A elements which aren’t traditional links, but simply trigger AJAX / JavaScript functions.

-webkit-user-drag

The -webkit-user-drag property specifies that an entire element should be draggable instead of its contents:

/* no dragging at all */
.content p.noDrag {
	-webkit-user-drag: none;
}

/* drags entire element, not the text/selection */
.sidebar div.elDrag {
	-webkit-user-drag: element;
}

-webkit-appearance

Using the -webkit-appearance property, you can make a SPAN tag look like a radio button, or textarea, or SELECT dropdown, or any of the other 50 supported properties.

span.lookLikeRadio {
	-webkit-appearance: radio;
}

span.lookLikeTextarea {
	-webkit-appearance: textarea;
}

span.lookLikeScrollbar {
	-webkit-appearance: scrollbartrack-horizontal;
}

Wanna see this one in action? Check out my post: WebKit-Specific Style: -webkit-appearance.

-webkit-text-security

Who knew you could customize the character which hides password characters?

input[type="password"] {
	-webkit-text-security: square;
}

Not necessarily useful but interesting that WebKit gives us this ability.

-webkit-user-select

The -webkit-user-select property allows us to prevent users from selecting text within a given element:

div {
	-webkit-user-select: none;
}

Preventing selection within a node can be helpful when on nodes which you prefer only be clicked.

I disliked browser-specific functionality when I was younger because I had the wrong mentality; you use them as enhancers, not for core functionality. Have a favorite WebKit-specific CSS property? Share it!

Interesting -webkit CSS Properties is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

A while back I shared a clever technique for creating triangles with only CSS. Over the past year, I’ve found CSS triangles incredibly effective, especially when looking to create tooltips or design elements with a likewise pointer pattern. There’s another common shape that’s easy to create, and that is the circle. Using border-radius, you can create wonderful CSS circles.

The CSS

Setting the border-radius of each side of an element to 50% will create the circle display at any size:

.circle {
	border-radius: 50%;
	width: 200px;
	height: 200px; 
	/* width and height can be anything, as long as they're equal */
}

It’s really that simple…but I can’t let this post go without touching on CSS gradients and basic spin animation:

/* Create the animation blocks */
@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
	from { -moz-transform: rotate(0deg); }
	to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin {
	from { -ms-transform: rotate(0deg); }
	to { -ms-transform: rotate(360deg); }
}

/* Spinning, gradient circle; CSS only! */
#advanced {
	width: 200px;
	height: 200px;
	
	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
	background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
	
	
	/* webkit chrome, safari, mobile */
	-webkit-animation-name: spin; 
	-webkit-animation-duration: 3s; /* 3 seconds */
	-webkit-animation-iteration-count: infinite; 
	-webkit-animation-timing-function: linear;

	/* mozilla ff */
	-moz-animation-name: spin; 
	-moz-animation-duration: 3s; /* 3 seconds */
	-moz-animation-iteration-count: infinite; 
	-moz-animation-timing-function: linear;

	/* microsoft ie */
	-ms-animation-name: spin; 
	-ms-animation-duration: 3s; /* 3 seconds */
	-ms-animation-iteration-count: infinite; 
	-ms-animation-timing-function: linear;
}

Voila. There’s an awesome CSS circle!

CSS circles don’t immediately appear as useful as CSS triangles, but they surely have value within design. An animated set of circles could act as a loading animation; creative use of the circle is up to you. Can you think of a good CSS circle usage? Share!

CSS Circles is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

::-moz-list-bullet

::-moz-list-bullet allows developers to style the bullet bullet text in lists; not the content, but the bullet text itself:

ul.customList li::-moz-list-bullet {
	color: #999;
	font-size: 24px;
	text-decoration: underline;
}

-moz-force-broken-image-icon

Firefox presently displays alt text for every broken image on the page. This may not be helpful for the purposes of debugging because the text may blend into the page. By using -moz-force-broken-image-icon, you can fore the broken image icon instead of the alt text:

img {
	-moz-force-broken-image-icon: 1;
}

-moz-margin-start and -moz-margin-end

Both work very much like margin-left and margin-right, but reverse position when in RTL mode. Very useful if you’re trying to create a flexible website built for LTR or RTL reading.

.myBlock {
	-moz-margin-start: 10px;
	-moz-margin-end: 5px;
}

-moz-orient

The -moz-orient property currently only applies to progressbar elements, allowing them to be vertical or horizontal:

progress.up {
	-moz-orient: vertical;
}

-moz-window-shadow

-moz-window-shadow specifies whether a window in OS X will have a shadow.

.panel {
	-moz-window-shadow: none;
}

There are a few hundred proprietary properties available so take a few moments and let me know if you find any of them interesting, and if you’ve used any of them for your projects!

Interesting -moz CSS Properties is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let’s have a look at how CSS filters work and how you can quickly create elements that are beautifully filtered!

There are many CSS filters to choose from: grayscale, blur, sepia, saturate, opacity, brightness, contrast, hue-rotate, and invert. While each property value generally falls between 0 and 1, there are a few exceptions. The blur property uses a unit of pixels and can be any whole number, and the hue-rotate filter value is a whole number with a “deg” unit.

The following CSS snippet will blur an element:

.myElement {
	-webkit-filter: blur(2px);
}

Multiple filters are separated by spaces, so we could also add grayscale and opacity values to the blur:

.myElement {
	-webkit-filter: blur(2px) grayscale (.5) opacity(0.8);
}

Let’s get crazy with hue-rotate as well:

.myElement {
	-webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}

If static filtering isn’t enough for you, CSS filters also animate with @-webkit-keyframes:

@-webkit-keyframes testAnim {
	0% {
		-webkit-filter: grayscale(0.5) blur(1px) saturate(2);
	}
	100% {
		-webkit-filter: grayscale(0.2) blur(6px) saturate(9);
	}
}

/* the photo to be animated via filters */
#animatePhoto {}
#animatePhoto:hover {
	-webkit-animation-name: testAnim;
	 -webkit-animation-duration: 2s;
	 -webkit-animation-iteration-count: 1;
	 -webkit-animation-direction: alternate;
	 -webkit-animation-timing-function: ease-out;
	 -webkit-animation-fill-mode: forwards;
	 -webkit-animation-delay: 0s;
}

Expect a performance hit with heavy CSS filter usage; be sure to heavily test your site wherever filtering is used. CSS filters have not yet hit mobile, but assume that CSS filters will be taxing in that environment as well.

The additional of CSS filters to the web provides a new level of customization for images, video, and DOM nodes in general. We should see some solid, practical uses for CSS filters emerge in the coming years. Have fun playing around with CSS filters and let me know if you can think of some immediate, practical uses!

CSS Filters is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Facebook recently implemented a new, lighter tooltip. I say the tooltip is lighter because it seems a lot quicker and more elegant than their previous effort. I took a few moments to grab the HTML structure and CSS rules to see how they did it.

The HTML

The tooltip structure consists of five elements:

	

		

			

				{content here}{content here}{content here}{content here}{content here}{content here}{content here}{content here}{content here}
			
		
		

	

The root element dictates the position of the tooltip (which is most likely injected to the body). The sole child element controls the width of the tooltip. That element contains two elements: the content container and the and the arrow node (which I’ve changed from an I element to a DIV). The last, innermost DIV element will hold the content and provide padding.

The CSS

The CSS to create the tooltip layout is actually very minimal:

body {
	font-size: 11px;
	font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
	color: #333;
	line-height: 1.28; 
	text-align: left;
	direction: ltr;
}

.uiContextualDialogPositioner, .uiContextualDialogPositioner .uiContextualDialog {
	position: absolute;
	z-index: 200;
}

.uiContextualDialogLeft .uiContextualDialog {
	right: 0;
}

.uiOverlayArrowRight {
	padding-right: 10px;
}

.uiOverlay {
	position: relative;
	z-index: 200;
}

.uiContextualDialog, .uiContextualDialog:focus {
	outline: 0 solid transparent;
}

.uiOverlayContent {
	background: white;
	border: 1px solid #8C8C8C;
	border: 1px solid rgba(0, 0, 0, .45);
	border-bottom: 1px solid #666;
	-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
	-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
	box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
	position: relative;
}

.uiOverlayContentHolder {
	padding: 10px;
}

.uiOverlayArrow {
	position: absolute;
	overflow: hidden;
}

.uiOverlayArrowRight .uiOverlayArrow {
	background-image: url(sprite.png);
	background-repeat: no-repeat;
	background-position: -177px -309px;
	height: 16px;
	right: 2px;
	width: 9px;
}

The content pane contains the majority of the CSS rules, include the box-shadow and border, both of which use rgba color for a more detailed effect. Showing and hiding of the tooltip may be done via CSS key-frames or JavaScript — the choice would be up to the individual implementing the tooltip.

Why Show This?

Two reasons. The first is that I appreciate well-coded features like this. The second, more important reason, is that I’ll be creating a JavaScript-powered version of this functionality which accounts for content size, position on page, stacking/z-index management, etc. Do I create as a jQuery and MooTools plugin? Do I create it as a standalone JavaScript project. Let me know your thoughts!

Facebook Tooltip HTML and CSS is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Last December I wrote a blog post titled Create Spinning Rays with CSS3 Animations & JavaScript where I explained how easy it was to create a spinning rays animation with a bit of CSS and JavaScript. The post became quite popular so I thought I’d take some time to look at it and improve it. It occurred to me that one solution I didn’t present was a much lighter solution; a solution that required only CSS!

The HTML Structure

The structure will stay the same from the last post:

<div id="raysDemoHolder">
	<a href="/" id="raysLogo">David Walsh Blog</a>
	<div id="rays"></div>
</div>

One parent element (with position:relative and fixed dimensions) with two child elements: the logo and the ray container.

The CSS

This CSS-only version uses CSS transforms like the previous boasted, but now we’ll introduce @keyframes. The base goal we’ll have for the keyframes is starting at rotate(0deg), animating to rotate(360deg):

/* keyframes for animation;  simple 0 to 360 */
@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
	from { -moz-transform: rotate(0deg); }
	to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin {
	from { -ms-transform: rotate(0deg); }
	to { -ms-transform: rotate(360deg); }
}

/* basic structure for the rays setup */
#raysDemoHolder	{ 
	position: relative; 
	width: 490px; 
	height: 490px; 
	margin: 100px 0 0 200px; 
}
#raysLogo { 
	width: 300px; 
	height: 233px; 
	text-indent: -3000px; 
	background: url(logo.png) 0 0 no-repeat; 
	display: block; 
	position: absolute; 
	top: 0; 
	left: 0; 
	z-index: 2; 
}
#rays	{ /* with animation properties */
	background: url(rays.png) 0 0 no-repeat; 
	position: absolute; 
	top: -100px; 
	left: -100px; 
	width: 490px; 
	height: 490px; 
	
	/* webkit chrome, safari, mobile */
	-webkit-animation-name: spin; 
	-webkit-animation-duration: 40000ms; /* 40 seconds */
	-webkit-animation-iteration-count: infinite; 
	-webkit-animation-timing-function: linear;
	
	/* mozilla ff */
	-moz-animation-name: spin; 
	-moz-animation-duration: 40000ms; /* 40 seconds */
	-moz-animation-iteration-count: infinite; 
	-moz-animation-timing-function: linear;
	
	/* microsoft ie */
	-ms-animation-name: spin; 
	-ms-animation-duration: 40000ms; /* 40 seconds */
	-ms-animation-iteration-count: infinite; 
	-ms-animation-timing-function: linear;
}

#rays:hover {
	/* -webkit-animation-duration: 10000ms; 10 seconds - speed it up on hover! */
	/* resets the position though!  sucks */
}

Using the animation-timing-function, animation-duration, and animation-iteration-count will allow us to make the animation linear (consistent), well-timed, and allow the animation to continue forever! You’ll also notice that the animation is much smoother than the JavaScript-powered counterpart.

Now we have a problem though: Opera does not yet support @keyframes. Luckily Opera’s default functionality allow for us to create this never-ending animation:

/* boooo opera */
-o-transition: rotate(3600deg); /* works */

Just that bit drives the transformation continuously. As for Internet Explorer, I tried using -ms-transform / -ms-translation to support IE9 but couldn’t get it to work.

The JavaScript

Like HBO’s website said about Oz: “gone but never forgotten.” One problem with the CSS-only version is that changing the animation-duration property upon hover (speeding it up when the user’s mouse enters the rays) restarts the animation and thus makes it look awkward, but that’s just one of the current limitations of CSS animations.

It’s always good to revisit your code to ensure it’s optimal. While this CSS-only version doesn’t animate gracefully in Internet Explorer, the other browsers animate quite well. If you must support IE, adding a conditional comment with a JavaScript version would be best practice. Happy spinning!

Create Spinning Rays with CSS3: Revisited is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The HTML

iScroll requires a two-DIV pattern for declaring where iScroll will be used. The first DIV is the wrapper, the second DIV is the scrollable area:

<div id="wrapper">
	<div id="scroller">
		<div style="padding:15px 30px;"> <!-- padding for content -->
		
			<!-- content goes here -->
			
		</div>
	</div>
</div>

iScroll will create and inject the scrollbar within the wrapper DIV. The content is held within the scroller DIV.

The CSS

The CSS is where iScroll can get a bit fuzzy. For iScroll to work optimally, both the wrapper and scroller DIVs need to be positioned absolutely and be styled to widths of 100%:

#wrapper {
	position:absolute;
	z-index:1;
	top:0; 
	bottom:0; 
	left:0;
	width:100%;
	overflow:auto;
}

#scroller {
	position:absolute; z-index:1;
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
	padding:0;
}

As a result, the third DIV of the structure needs the contain enough padding-right to keep the text and scrollbar far enough way from each other. Be sure to position those elements properly or iScroll wont work at all (as I found out the hard way)!

The JavaScript

The most obvious piece of using iScroll is including its .js file:

<script type="text/javascript" src="iscroll/src/iscroll.js"></script>

With iScroll now available within the page, the next step is creating the iScroll instance that suits the needs of your desired usage. The most simple of uses provides only the wrapper ID:

var scroller = new iScroll('wrapper');

Awesome; the page’s native scrollbar disappears and is replaced by an iOS-style scrollbar! But like every good JavaScript lib, iScroll provides a host of features that allow you to customize your scrollbar. Options include setting flags for bounce, momentum, fade and hide settings, and whether scrollbars should be allowed both vertically and horizontally. Here’s another example of how you can create a pull-to-refresh scrollbar:

var myScroll,
	pullDownEl, pullDownOffset,
	pullUpEl, pullUpOffset,
	generatedCount = 0;

function pullDownAction () {
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el = document.getElementById('thelist');

		for (i=0; i<3; i++) {
			li = document.createElement('li');
			li.innerText = 'Generated row ' + (++generatedCount);
			el.insertBefore(li, el.childNodes[0]);
		}
		
		myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
}

function pullUpAction () {
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el = document.getElementById('thelist');

		for (i=0; i<3; i++) {
			li = document.createElement('li');
			li.innerText = 'Generated row ' + (++generatedCount);
			el.appendChild(li, el.childNodes[0]);
		}
		
		myScroll.refresh();		// Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
}

function loaded() {
	pullDownEl = document.getElementById('pullDown');
	pullDownOffset = pullDownEl.offsetHeight;
	pullUpEl = document.getElementById('pullUp');	
	pullUpOffset = pullUpEl.offsetHeight;
	
	myScroll = new iScroll('wrapper', {
		useTransition: true,
		topOffset: pullDownOffset,
		onRefresh: function () {
			if (pullDownEl.className.match('loading')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
			} else if (pullUpEl.className.match('loading')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
			}
		},
		onScrollMove: function () {
			if (this.y > 5 && !pullDownEl.className.match('flip')) {
				pullDownEl.className = 'flip';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
				this.minScrollY = 0;
			} else if (this.y < 5 && pullDownEl.className.match('flip')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
				this.minScrollY = -pullDownOffset;
			} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
				pullUpEl.className = 'flip';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
				this.maxScrollY = this.maxScrollY;
			} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
				this.maxScrollY = pullUpOffset;
			}
		},
		onScrollEnd: function () {
			if (pullDownEl.className.match('flip')) {
				pullDownEl.className = 'loading';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';				
				pullDownAction();	// Execute custom function (ajax call?)
			} else if (pullUpEl.className.match('flip')) {
				pullUpEl.className = 'loading';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';				
				pullUpAction();	// Execute custom function (ajax call?)
			}
		}
	});
	
	setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}

Since we live in the world of AJAX-driven websites that allow content to come and go, calling the refresh method is all you need to do for iScroll to reevaluate the scrollbar position and size:

// When the AJAX is done, refresh the scrollbar sizing and positioning...
scroller.refresh();

It’s also important to point out that iScroll allows zooming and pinching, as well as snapping to elements:

var myScroll = new iScroll('wrapper', {
	/* snap: true, */ 		// Would snap logically
	snap: "p",				// Snaps to each "P" tag
	momentum: false,
	hScrollbar: false,
	vScrollbar: false 
});

Lastly, iScroll-Lite is available for those looking to support only mobile browsers (iScroll allows for desktop support as well). The mischievous part of me would prefer iOS-style scrollbars instead of native browser scrollbars!

Possibly my favorite part of iScroll is that it’s a standalone library; no external JavaScript library is required. iScroll has many configuration parameters so I encourage you to visit the iScroll page to check out everything you can do. Matteo Spinelli’s iScroll is an outstanding piece of work; grab iScroll and start controlling your scrollbars today!

iPhone Scrollbars with iScroll is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The CSS

Assuming you have an element that’s focusable (usually via tabIndex), the CSS to adjust the outline is as simple as you would expect it to be:

.tableWidget td {
	outline-offset: 2px;
}

A positive outline-offset moves the offset further outside the element, whereas you can create an inner outline using negative outline-offset:

.tableWidget td {
	outline-offset: -1px;
}

In the case of the bug I mentioned above, using a negative outline-offset fixed the problem because the outline stays within element.

I wasn’t aware of the outline-offset property before coming across this issue and I’m certainly glad I know about it now. Removing the outline property is never a good idea because usability and accessibility, so the ability to control its placement relative to the element border is very valuable.

Control Element Outline Position with outline-offset is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

What’s even weirder is that they were randomly fix and unfix themselves as you hover over them. Horrible! After a bit of tinkering, I discovered the solution was adding a line-height of 20px to the parent the checkbox:

.checkboxList li { /* ..or whatever the parent is */
	line-height: 20px;
}

Twenty pixels should be considered the minimum — anything smaller wont prevent the problem completely.

Fix WebKit Checkbox Overflow is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Creating DOM Nodes

Creating new nodes is just about as simple as it gets:

// Create an empty DIV
var div = put("div");

Boom, there’s your new DIV element! And if you want your new code to have a few CSS classes:

// Create a DIV with some CSS classes
var div2 = put("div.classOne.classTwo");

How about creating nodes with attributes?

// Create a DIV with some CSS classes and attributes
var div3 = put("div.classOne.classTwo[title=Hover over me][style=display:inline-block]");

The syntax for inserting the DOM node is a bit different because the parent then becomes the first argument in the put signature:

// Create an INPUT with an ID and an attribute, place it into the body
// The body text goes into the third argument;  not(!) innerHTML, just text
var div4 = put(document.body, "input[type=text]#myInput", "This is inner html");

Manipulating Existing DOM Nodes

Manipulating DOM nodes is actually very much like creating the nodes themselves:

var myInput = document.getElementById("myInput");
put(myInput, ".anotherClass");

// Add CSS classes attributes to the element
put(myInput, "[placeholder=first name][required=true][title=first name element].yetAnotherClass");

Just remove the tagName and you can modify the node.

Node, Class, and Attribute Deletion

The “!” character is meaningful in that it represents deletion within put. Let’s remove a few classes and attributes from a given node, then let’s remove the node itself:

// Remove a CSS class from the INPUT element
put(myInput, "!anotherClass");

// Remove attributes from the INPUT element
put(myInput, "[!required][!title]");

// Delete a node!
put(myInput, "!");

The syntax for deletion is short but sweet. The only criticism I have is that if this could create a maintenance problem if developers are not experience with put.

Creating and Managing Child Nodes

Creating childNodes for an existing node is another functionality made easier by put:

// Create a base node so we can add nodes around it
var baseNode = put(document.body, "div#baseNode");

// Add two DIVs *after* the baseNode
put(baseNode, "+div +div");

// Add a SPAN element *before* the baseNode
put(baseNode, "-span");

// Create the parent list element 
var ul = put(document.body, "ul");

// Create a child list item
var firstItem = put(ul, "li");

Moving and ReParenting Nodes

Reparenting and moving elements within the DOM is another basic task that, when you use JavaScript’s native functions, takes far too much code. Let’s have a look at moving nodes around with put:

// Move one node to another parent
// parent > child
put(ul, ">", firstItem);

// Put one element after the first
put(div1, "+", div2);

A simple series of symbols designates where within the node try an element should go!

More Traditional Node Property Management

For those who prefer a more verbose element creation syntax, put-selector provides that as well:

var span = put(parent, "span", {
	title: "Hover over me!",
	style: "font-style: italic;"
});

Kris’ tool is great in that it’s ultra-efficient, modular, and easy to learn. On the other side, it’s possible that the syntax may be a bit too compact for persons try to maintain an application that they didn’t write. What do you think of put? An easy to use utility or a “simple but complicated” resource? If I’m honest, I’m teetering on the fence — maybe you can convince me?

DOM Manipulation with put-selector is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.