Issue #78  (delete/insertData() and Learning Tools)01/15/15

<p>But haven't the sweetest idea <button>DELETE</button></p>
<p>To me buzz is <button>INSERT</button></p>

var pars = document.querySelectorAll('p'),
    btns = document.querySelectorAll('button'),
    text;

btns[0].addEventListener('click', function () {
  text = pars[0].firstChild;
  text.deleteData(25, 4);
}, false);

btns[1].addEventListener('click', function () {
  text = pars[1].firstChild;
  text.insertData(14, 'onomatopoeia ');
}, false);

• These are text nodes we're manipulating, so anything you "insert" will appear as text. This means if you add HTML to the inserted text, it will be inserted as entities to appear on the page.
• Arguments that take an index will throw an error if the index doesn't make sense (i.e. "30" in a text node that's only 20 characters long).
• You'll get unexpected results when dealing with certain funky characters. See this demo for example. If you're up for it, Mathias Bynens explains.
• Both methods supported in IE9+.

Interactive Tools and Tutorials

Books

Video Courses

A Tweet for Thought

Suggestions / Corrections

Before I Go...