JS：动态创建元素
本帖最后由 马黑黑 于 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 ，不能生错了。
<div id="myBox">
<p>我是p标签，我在等待我的播放器弟弟：<br> </p>
</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>
好听好看，跟到学习。{:4_190:} 来学习js调用的相关知识。感谢黑黑分享{:4_187:} 加林森 发表于 2022-2-3 12:14
好听好看，跟到学习。
{:4_180:} 红影 发表于 2022-2-3 12:44
来学习js调用的相关知识。感谢黑黑分享
是不是觉得JS需要记忆的东西更多？而且，要学好JS，没有一定的英文基础是比较艰难的。JS的函数、方法、过程以及一些保留字，都是用自然语言的描述方式，像 math（数学）、createElement（创建元素）、while（条件循环，当……的时候）等等，不会英语就会莫名其妙，会英语一目了然。 马黑黑 发表于 2022-2-3 13:05
谢茶 马黑黑 发表于 2022-2-3 13:09
是不是觉得JS需要记忆的东西更多？而且，要学好JS，没有一定的英文基础是比较艰难的。JS的函数、方法、过 ...
其实不管会不会，它用到的单词毕竟有限，只要熟悉这些单词就可以了啊。 红影 发表于 2022-2-3 15:21
其实不管会不会，它用到的单词毕竟有限，只要熟悉这些单词就可以了啊。
不行。它的东西不止这些单词。 马黑黑 发表于 2022-2-3 15:53
不行。它的东西不止这些单词。
嗯嗯，那的确是有点困难呢。将来有完全汉化的JS就好了。 红影 发表于 2022-2-3 16:45
嗯嗯，那的确是有点困难呢。将来有完全汉化的JS就好了。
没必要的 马黑黑 发表于 2022-2-3 17:42
没必要的
我们使用起来就方便了啊{:4_173:} 红影 发表于 2022-2-4 14:21
我们使用起来就方便了啊
这得依赖浏览器的支持。目前，没有纯国产的浏览器。 马黑黑 发表于 2022-2-4 14:24
这得依赖浏览器的支持。目前，没有纯国产的浏览器。
唉，没办法的事。 红影 发表于 2022-2-4 15:26
唉，没办法的事。
也许有，两条路：
其一：重新封装JS，不改变运行机制，只封装开发环境，做完编译成原生态的JS代码；
其二：编写自己核心的浏览器，包括JS、css都是自定义的，这样一切都是中文的。
页:
[1]