Elementals.js

Latest Version: 2.0 RC 3 14 March 2017

_.nodeAddSelectButton Demo

View the Demo live here

This demo uses elementals.js _.nodeAddSelectButton method to show how quickly and easily a "select contents" button can be added to a page.

Simple Demo

Used in its simplest form, _.nodeAddSelectButton will insert the button tag before the element you send to it. In our example we have a paragraph with the id of test1 on it. The code to add the button before the paragraph is simply:

_.nodeAddSelectButton(_d.getElementById('test1'));

That's it. A button tag containing the word "select" is inserted before that paragraph, and when you click on it, the contents of that paragraph is selected just like you clicked and dragged the mouse over it.

Complex Test

This elementals.js object method can also be passed additional parameters to set the text inside the button tag, an element you wish to put the button inside or around, and where you wish to place it. The default placement behavior is "before" but you can pass any placement value valid for the _.nodeAdd method.

In the example we have a H2#complexTestHeader and a P#test2. To add the button to the end of the inside of the header whilst still targeting the paragraph, the required JavaScript is simply:

_.nodeAddSelectButton(
	_d.getElementById('test2'),
	'Select text in box below',
	_d.getElementById('complexTestHeader'),
	'last'
);

The first parameter being what to select, the second being the text to put inside the button, the next parameter being what element to target for the placement of the button, and "last" meaning to place the new button on the DOM as the lastChild of that h2.