What this code here does is that it gets a html, let's say, a banner, and inserts it after a element tag and after x number of words, but it differs what are html tags from what is text, this way, the code won't strip any html tags. In other words, this jquery code is supposed to get a banner and place it on the middle of a text (Blog post for example) without breaking the text's html. This code works, but it needs some improvements.
For example, if I specify it to insert the html after 300 words, but there is a tag (Div, h1, p, whatever) after the word 200 (At position 201), it simply won't show any result.

JS Fiddle demo.

Here are the problems that I'm facing:

• - It requires that all the words are held in a single text node; it doesn't even attempt to count words that might begin in one element and end inside of a sibling-element.
• - It doesn't allow – in its current implementation – any way of inserting non-text into the created-element (although this could be allowed via the use of elem.innerHTML in place of elem.textContent), but it does return the created-element to the calling context so it can be cached or chained, which allows that created-element to be manipulated in some ways.
• - Some of the checks, if not most, are profoundly naive; and would benefit from extension to account for your own particular edge-cases.

The part responsible for getting the element is:

1. // specifying the node into which the element
2.     // should inserted:
3.         'node': document.querySelector('div > div')

The code:

1. // a simple utility function to get only the actual words
2. // from the supplied textNode (though this should work for
3. // elements also):
4. function getActualWords(node) {
5. 
   
6.     // gets the textContent of the node,
7.     // splits that string on one-or-more ('+')
8.     // white-space characters ('\s');
9.     // filters the array returned by split():
10.     return node.textContent.split(/\s+/).filter(function (word) {
11.         // word is the current array-element
12.         // (a 'word') in the array over
13.         // which we're iterating using
14.         // Array.prototype.filter();
15.         // here if the word, with leading
16.         // and trailing white-space removed
17.         // (using String.prototype.trim())
18.         // has a length greater than 0
19.         // (a falsey value) the word is kept
20.         // in the array returned by filter:
21.         return word.trim().length;
22. 
    
23.         // note that negative numbers are
24.         // also truthy, but no string can
25.         // have a negative length; so the
26.         // comparison is effectively, if
27.         // not explicitly 'greater than zero'
28.         // rather than simply 'not-zero'
29.     });
30. }
31. 
    
32. // named function to insert the specified
33. // element after the nth word:
34. function insertElemAfterNthWord(opts) {
35. 
    
36.     // defining the defaults for the function
37.     // (which can be overridden via the opts
38.     // Object):
39.     var defaults = {
40. 
    
41.         // the word after-which to insert the
42.         // the new element:
43.         'nth': 5,
44. 
    
45.         // the text of the new element:
46.             'elemText': 'new element',
47. 
    
48.         // the type of element (note no '<' or '>'):
49.             'elemTag': 'div'
50.     };
51. 
    
52.     // iterating over the supplied opts Object to update
53.     // the defaults with the user-supplied options using
54.     // for...in loop:
55.     for (var prop in opts) {
56. 
    
57.         // if the opts Object has a property and
58.         // that property is not inherited from the
59.         // prototype chain:
60.         if (opts.hasOwnProperty(prop)) {
61. 
    
62.             // we set the defaults property
63.             // to the property-value held
64.             // in the opts Object:
65.             defaults[prop] = opts[prop];
66.         }
67.     }
68. 
    
69.     // aliasing the defaults object (simply to save
70.     // typing; this is not essential):
71.     var d = defaults,
72. 
    
73.         // ensuring that the supplied string,
74.         // specifying the element-type has no
75.         // '<' or '>' characters (to ensure validty
76.         // this should be extended further to
77.         // ensure only alphabetical characters are kept):
78.         tag = d.elemTag.replace(/<|>/g, ''),
79. 
    
80.         // creating the new element:
81.         elem = document.createElement(tag);
82. 
    
83.     // setting the textContent of the new element:
84.     elem.textContent = d.elemText;
85. 
    
86.     // ensuring that the d.nth variable is
87.     // a number, not a string, in base-10:
88.     d.nth = parseInt(d.nth, 10);
89. 
    
90.     // if a node was specified:
91.     if (d.node) {
92. 
    
93.         // setting the 'n' variable to hold
94.         // to the firstChild of the d.node:
95.         var n = d.node.firstChild,
96. 
    
97.             // using the utility function (above)
98.             // to get an Array of only the actual 
99.             // words held in the node:
100.             words = getActualWords(n),
101. 
     
102.             // getting the number of words held
103.             // in the Array of words:
104.             wordCount = words.length;
105. 
     
106.         // while (n.nodeType is not a textNode OR
107.         // d.nth is a greater number than the number
108.         // of words in the node) AND the node has
109.         // a following sibling node:
110.         while ((n.nodeType !== 3 || d.nth > wordCount) && n.nextSibling) {
111. 
     
112.             // we update n to the next-sibling:
113.             n = n.nextSibling;
114. 
     
115.             // we get an array of words from
116.             // newly-assigned node:
117.             words = getActualWords(n);
118. 
     
119.             // we update the wordCount, in
120.             // order to progress through:
121.             wordCount = words.length;
122.         }
123. 
     
124.         // if the number of words is less than
125.         // the nth word after which we want to
126.         // insert the element, we return from
127.         // the function (doing nothing):
128.         if (getActualWords(n).length < d.nth) {
129.             return;
130. 
     
131.         // otherwise:
132.         } else {
133. 
     
134.             // again we get an Array of actual words,
135.             // we slice that Array and then get the
136.             // last array-element from that array,
137.             // using Array.prototype.pop():
138.             var w = getActualWords(n).slice(0, d.nth).pop(),
139. 
     
140.                 // here we get the index of that word
141.                 // (note that this is naive, and relies
142.                 // upon the word being unique as a
143.                 // proof-of-concept; I plan to update later):
144.                 i = n.textContent.indexOf(w);
145. 
     
146.                 // we split the n textNode into
147.                 // two separate textNodes, at
148.                 // supplied index ('i + w.length');
149.                 // n remains the shortened 'first'
150.                 // textNode:
151.                 n.splitText(i + w.length);
152. 
     
153.             // navigating to the parentNode, and
154.             // using insertBefore() to insert the
155.             // new element ('elem') before the
156.             // next-siblin of the n textNode:
157.             n.parentNode.insertBefore(elem, n.nextSibling);
158. 
     
159.             // doing exactly the same, but adding a
160.             // newly-created textNode (of a space character)
161.             // between the 'n' textNode (which by definition
162.             // ends without a space) and newly-inserted
163.             // element:
164.             n.parentNode.insertBefore(document.createTextNode(' '), n.nextSibling);
165. 
     
166.             // joining adjacent, but unconnected,
167.             // textNodes (n and the newly-inserted
168.             // space character) together, to become
169.             // a single node:
170.             n.parentNode.normalize();
171. 
     
172.             // returning the newly-created element
173.             // so that it can be modified if required
174.             // or simply cached:
175.             return elem;
176.         }
177. 
     
178.     }
179. }
180. 
     
181. 
     
182. // calling the function, specifying the
183. // user-defined properties:
184. insertElemAfterNthWord({
185.     // after the tenth word:
186.     'nth': 10,
187.     // the element-type (a span):
188.         'elemTag': 'span',
189. 
     
190.     // setting the text of that new element:
191.         'elemText': 'this is the newly-added text inside the newly-added element!',
192. 
     
193.     // specifying the node into which the element
194.     // should inserted:
195.         'node': document.querySelector('div > div')
196. 
     
197. // chaining the function, to use the Element.classList
198. // API to add the 'newlyAdded' class to the
199. // newly-created element:
200. }).classList.add('newlyAdded');

References:

• Array.prototype.filter().
• Array.prototype.pop().
• Array.prototype.slice().
• Document.createElement().
• Document.createTextNode().
• Document.querySelector().
• Element.classList.
• for...in loop.
• Guide to JavaScript Regular Expressions.
• Node.firstChild.
• Node.insertBefore().
• Node.nextSibling.
• Node.nodeType.
• Node.normalize().
• Object.hasOwnProperty().
• parseInt().
• String.prototype.indexOf().
• String.prototype.replace().
• String.prototype.split().
• String.prototype.trim().
• Text.splitText().
• while () {...} loop.