JS：动态创建元素

马黑黑 · 发表于 2022-2-3 12:01

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-2-3 12:10 编辑

本帖目标：在一个特定场景创建一个 audio 播放器

实现思路：

用 JS 的 createElement 创建一个 audio 子元素，并给它赋相关值，然后由父元素用 appendChild 方法将子元素追加到自己的名下。

代码：

一、HTML场景：

<div id="myBox">
      <p>我是p标签，我在等待我的播放器弟弟：<br> </p>
</div>

二、JS创建并追加子元素到上面 div 的内容中：

<script language="javascript">

var aud = document.createElement("audio");

aud.autoplay = "autoplay";
aud.loop = "loop";
aud.controls = "controls";
aud.src = "http://www.kumeiwp.com/sub/filestores/2022/01/13/e8bc3a9d8493369f4ea3936527d6894e.mp3";

document.getElementById("myBox").appendChild(aud);

</script>

JS解释：

① 用 document.createElement() 方法创建元素，我们创建的是 audio 播放器，所以要指明括号中的元素标签名称为 audio，创建其他的就用对应的标签名，如 div、span、ul 等等。我们声明一个变量来完成这个创建，变量即为元素的句柄，方便下面对这个新元素进行其他操作。

var aud = document.createElement("audio"); // 创建新元素并将元素句柄授权给变量 aud

② 设定新 audio 标签的属性：

aud.autoplay = "autoplay";  // 自动播放
aud.loop = "loop";  //循环播放
aud.controls = "controls";  // 控件可见
aud.src = "MP3地址";

③ 最后是将这个业已创建的 audio 播放器元素交给谁，也就是说在谁的地盘里出现。我们布置的场景是一个id标识为 myBox 的div，它已经有一个大儿子 p 标签，在等它的弟弟呢，audio 这个二宝就由myBox生出来：

document.getElementById("myBox").appendChild(aud);

看，直接生，前面不用给句柄变量，因为没必要，但生的是谁要有变量 aud ，不能生错了。