Skip to content
Related Articles

Related Articles

p5.js | createSpan() Function

View Discussion
Improve Article
Save Article
  • Last Updated : 26 Feb, 2020
View Discussion
Improve Article
Save Article

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:
create-randomly

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

Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!