JS教程四——动态创建元素
本帖目标:在一个特定场景创建一个 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 ,不能生错了。
实现思路:
用 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 ,不能生错了。
前一篇: JS教程三——简单控制audio的播放与暂停详解
下一篇: js教程五——童年图片响应实例
发表评论:
评论列表 [0条]