Append to each element by class name

JJ2357
JJ2357 used Ask the Experts™
on
We are looking for a vanilla js solution that will append a common html block after each instance of a dd class name = "alpha".

Example of current state:
<div class="image><dl><dd class="alpha">text string 1</dd></dl></div>
<div class="image><dl><dd class="alpha">text string 2</dd></dl></div>
...
<div class="image><dl><dd class="alpha">text string n</dd></dl></div>

Open in new window

Example of desired state:
<div class="image><dl><dd class="alpha">text string 1</dd><dd class="beta">New html string </dd></dl></div>
<div class="image><dl><dd class="alpha">text string 2</dd><dd class="beta">New html string</dd></dl></div>
...
<div class="image><dl><dd class="alpha">text string n</dd><dd class="beta">New html string </dd></dl></div>

Open in new window


We've been trying insertBefore to no avail.  Many thanks in advance.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2013
Awarded 2012
Commented:
Hi,
here we go:
 function AppendNodes() {
 
 	 var allElems = document.getElementsByClassName("alpha");
 		for (var i=0,l=allElems.length;i<l;i++) {
    		insertAfter(allElems[i]);
    }  
 
 }
 
 function insertAfter(elem) {
   var nodeToAdd = document.createElement("dd");
   var innerT = document.createTextNode("New HTML string");
   nodeToAdd.appendChild(innerT);
   nodeToAdd.className="beta";
   elem.parentNode.insertBefore(nodeToAdd, elem.nextSibling);
 }

Open in new window


Live sample:
http://jsfiddle.net/EE_RainerJ/85e2vby3/

HTH
Rainer

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial