p5.js createSpan() Function

0 0 1 minute read

The createSpan() function is used to create a span element in the DOM with the given optional inner html.

Syntax:

createSpan([html])

Parameters: This function accepts a single parameter as mentioned above and described below:

html: It is a string with the innerHTML of the span element. It is an optional parameter.

Return Value: It returns a pointer to the p5.Element with the created node.

The example below illustrate the createSpan() function in p5.js:

Example:

function setup() { 
  createCanvas(600, 300); 
   
  textSize(18); 
  text("Click on the button to create" + 
       "<span> elements at random positions.", 20, 20) 
  genBtn = createButton("Create span element").position(30, 40); 
  genBtn.mousePressed(spawnSpan); 
} 
   
function spawnSpan() { 
  newSpan = createSpan("This is a <b>span</b> element"+ 
                       " with custom <i>innerHTML</i>."); 
  newSpan.position(random(50, 500), random(50, 300)); 
} 

Output:

Online editor: https://editor.p5js.org/

Environment Setup: https://www.zambiatek.com/p5-js-soundfile-object-installation-and-methods/

Reference: https://p5js.org/reference/#/p5/createSpan

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!