【黑师音画帖小白教程】第二十四讲：学一点点JS（四）动态追加元素
第二十四讲：学一点点JS（四）动态追加元素
动态给帖子追加元素是做高级音画帖必备的能力，有必要用一个章节专门讨论。本讲概念和方法都不会太多，难度 ★★★☆。
有多种方法可以给既有元素追加新的子元素，我们以给元素追加一张图片为例加以说明，假设帖子元素 id="tz"：
//方法一 ：使用 element.innerHTML = '图片HTML代码'
var imgHtml = '<p><img alt="" src="图片地址" /></p>'; //编写图片代码并赋值给变量 imgHtml
tz.innerHTML += imgHtml; //令帖子容器的内容再加上图片标签
//tz.innerHTML = imgHtml + tz.innerHTML; //将图片添加到帖子其他内容之前
//方法二 ：使用 element.appendChild() 或 prepend() 方法
var image = document.createElement('img'); //创建 img 标签
image.alt = ''; //img 标签不能缺少alt属性
image.src = '图片地址'; //给 img 标签的src属性赋值（指定图片地址）
//image.title = '图片响应式弹出的标题';
//image.className = 'mypic'; //使用 .mypic 选择器的样式
tz.appendChild(image); //加载图片到 tz 容器中 : 向后追加
//tz.prepend(image); //加载图片到 tz 容器中 ：向前追加
第一种方法其实是改变帖子容器的 innerHTML 即内部HTML代码内容，此法想加多少加多少。类似 innerHTML 的元素JS属性还有 innerText 内部文本，textContent 文本内容，后二者都是基于文本而非HTML代码，它们能加文本但加不了元素，所以要用 innerHTML 来实现。请特别注意这三个关键字属性的大小写。
第二种方法是专业的追加元素方法，先根据需要创建对应的标签，我们要追加的是图片标签，所以基于 document（web文档）的 createElement 创建元素方法使用的是 'img' 标签做参数，元素标签是字符名称，所以用小角单引号或双引号包裹起来。如果创建的是div标签，就用 'div' 做参数，其余标签依此类推。接着，根据标签的相应属性和自己设计要求，给足标签所有的属性和属性值。最后，使用 容器.appendChild() 或 容器.prepend() JS内置方法将所创建的元素追加给容器，其中，appendChild() 追加到容器所有子元素的后面，prepend() 方法追加到容器所有子元素的前面。向前还是向后追加根据情况而定，比如，不想让追加的元素挡住容器里的既有元素，则用 prepend() 方法，如果层级关系不必关心，则用哪一个都行，又或者，如果想让添加的元素不被兄弟元素遮挡，则使用 appendChild() 方法。
方法二通常会使用CSS做些配套，以避免要写的JS代码量过大。以下两个例子都给图片设置了CSS样式，绝对定位是和按钮一块儿设置，第一个示例的图片还专门设置了一个class选择器、第二个示例则给待添加图片设置一个id选择器，然后分别使用 appendChild() 和 prepend() 方法追加图片到容器元素中，运行代码后注意观察新追加的图片和既有元素的层级关系。
【例一】appendChild() 方法：
<style>
#tz1 {
margin: 30px auto;
width: 600px;
height: 300px;
border: 1px solid gray;
position: relative;
}
#tz1 > img, #tz1 > button { position: absolute; }
.pic { max-width: 90%; max-height: 90%; left: 60px; }
#btnAdd1 { bottom: 10px; right: 10px; }
</style>
<div id="tz1">
<img alt="" src="https://638183.freep.cn/638183/web/svg/3star.svg" title="图一" />
<button id="btnAdd1" type="button" value="add1">点击我使用 appendChild() 方法向后追加图片</button>
</div>
<script>
btnAdd1.onclick = () => {
var image1 = document.createElement('img');
image1.className = 'pic';
image1.alt = '';
image1.src = 'https://638183.freep.cn/638183/web/svg/sunfl-1.svg';
image1.title = '图二';
tz1.appendChild(image1);
btnAdd1.disabled = true;
};
</script>
【例二】prepend() 方法：
<style>
#tz2 {
margin: 30px auto;
width: 600px;
height: 300px;
border: 1px solid gray;
position: relative;
}
#tz2 > img, #tz2 > button { position: absolute; }
#pic { max-width: 90%; max-height: 90%; left: 60px; }
#btnAdd2 { bottom: 10px; right: 10px; }
</style>
<div id="tz2">
<img alt="" src="https://638183.freep.cn/638183/web/svg/3star.svg" title="图一" />
<button id="btnAdd2" type="button" value="add2">点击我使用 prepend() 方法向前追加图片</button>
</div>
<script>
btnAdd2.onclick = () => {
var image2 = document.createElement('img');
image2.id = 'pic'
image2.alt = '';
image2.src = 'https://638183.freep.cn/638183/web/svg/sunfl-1.svg';
image2.title = '图二';
tz2.prepend(image2);
btnAdd2.disabled = true;
};
</script>
有些应用场合不方便加CSS，我们也可以在JS代码中完成所有的CSS设置，可以使用元素的 style 属性一个一个属性地写CSS各属性代码，也可以使用 style.cssText 属性批量写所需的CSS各属性代码。下面是两种实现方法的代码举例：
<!-- 方法一 ：分开写图片标签的CSS属性 -->
<div id="tz"></div>
<script>
var pic = document.createElement('img');
pic.style.position = 'absolute';
pic.style.left = '20px';
pic.style.top = '20px';
pic.style.width = '200px';
pic.style.height = '200px';
pic.style.title = '图片美美哒';
pic.style.alt = '';
pic.src = 'https://638183.freep.cn/638183/web/svg/flower_3.svg';
pic.onclick = () => alert('谢谢你点击我！');
tz.appendChild(pic);
</script>
<!-- 方法二 ：批量写图片标签的CSS属性 -->
<div id="tz"></div>
<script>
var pic = document.createElement('img');
pic.style.cssText = `
position: absolute;
left: 20px;
top: 20px;
width: 200px;
height: 200px;
`;
pic.style.title = '图片美美哒';
pic.style.alt = '';
pic.src = 'https://638183.freep.cn/638183/web/svg/flower_3.svg';
pic.onclick = () => alert('谢谢你点击我！');
tz.appendChild(pic);
</script>
以上代码可以分别拿到 pencil code 运行，运行前勾选一下界面右下角的复选框以令小窗口程序运行时不过左偏移。
作业：假设有一个自设宽高尺寸的元素，它里面有一行h2标题、一张小图片，现在，请给该元素追加一个 audio 标签。要求：① 图片另起一行，以确保布局整齐有序；② audio 播放器以追加的方式放在既有子元素之后，给它指定音频地址并令其自动播放、循环播放。
提示：本次作业的目的主要是理解元素的追加和追加元素前的设置，所以可以参考如下代码结构完成作业，但请尽量不要复制！可以理解好代码再去盲做——
<style>
#mydiv {
margin: 30px auto;
width: 700px;
height: 360px;
position: relative;
}
</style>
<div id="mydiv">
<h2>h2标题</h2>
<!-- p标签能保证图片独占一行 ：图片是行内标签 -->
<p><img src="图片地址" alt="" /></p>
</div>
<script>
var aud = document.createElement('audio');
/* audio标签各属性不是CSS属性，是HTML属性，注意以下属性不能出现 style */
aud.src = 'MP3地址';
aud.autoplay = true; //false不自动播放
aud.loop = true; //false不循环播放
aud.controls = true; //缺省或false不显示界面
mydiv.appendChild(aud); //向后追加播放器
</script>
前一篇: 【黑师音画帖小白教程】第二十三讲：学一点点JS（三）元素的JS相关事件
下一篇: 【黑师音画帖小白教程】第二十五讲：学一点点JS（五）JS操作CSS属性和HTML属性
评论列表 [0条]
