JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

JavaScript

function transformText() {
	var divElements =
	document.getElementById("transcriptText").children;
	console.log(divElements);
	
	//Traversing the elements within the DIV tag
	
	for(var i=0;i<divElements.length;i++) {
		
		//Grabbing the text if the element is "p"
		
		var p = divElements[i];
		if(p.tagName === "p") {
			
			//Save the text of the p tag
			
			var text = p.innerHTML;
			//console.log(text);
			
			//Clear the contents of the 'p' element
			
			p.innerHTML = "";
			
			//For each word in the text
			
			var words = text.split('');
			console.log(words);
			
			for(var j = 0;j<words.length;j++)
			{
				//Create  a new SPAN Element
				
				var span = document.createElement("SPAN");
				
				//Add word to the Span Element
				
				var textNode = document.createTextnode(words[j] + " ");
				span.appendChild(textNode);
				
				//Add an Event Handler to the span element
                span.onclick = function()  {
                };
				
                p.appendChild(span);
			}
		}
	}