p5.js createElement()函数

在p5.js中，我们可以使用createElement()函数来创建DOM元素。

DOM（Document Object Model）是指用于HTML和XML文档的编程接口。DOM使得我们可以在网页中使用JavaScript来更改HTML元素、CSS样式以及网页中的文本内容。

createElement()函数可以用于创建任意的HTML元素，例如段落、按钮、输入框等等。

语法

createElement(tagName, [content])

• tagName：要创建的元素种类，例如'p'表示段落，'h1'表示1级标题等。
• content：元素的文本内容，为可选项。如果需要在元素中显示文本，可以通过content参数来指定。

使用方法

function setup() {
  // 创建一个标题元素
  const title = createElement('h1', '欢迎来到我的网站！');

  // 创建一个段落元素
  const paragraph = createElement('p', '这里是网站的主要内容...');

  // 将元素添加到网页中
  title.parent('main');
  paragraph.parent('main');
}

上述代码中，我们先分别使用createElement()函数创建了一个标题元素和一个段落元素，然后使用parent()函数将它们添加到网页的'main'元素中。

操作DOM元素

除了创建DOM元素之外，我们还可以使用p5.js库中提供的其他函数对DOM元素进行操作。

修改元素内容

我们可以使用.html()函数来修改元素的内容：

const title = createElement('h1', '欢迎来到我的网站！');
title.html('这是新的标题');

修改元素样式

我们可以使用.style()函数来修改元素的样式：

const title = createElement('h1', '欢迎来到我的网站！');
title.style('color', 'red');

总之，p5.js的createElement()函数为我们操作DOM元素提供了非常便捷的方式，让我们能够轻松地创建网页上的各种元素，并自由操纵它们的内容和样式。