js中appendChild的用法

0X00写在最前

之前学习js时看到的appChild方法都是用于列表，也就是添加li标签之类，类似这样

今天在mdn上看到了新的用法，令人耳目一新，记录一下与大家共同分享

0x01项目地址

https://roy-tian.github.io/mdn-examples/javascript/gallery/

0x02 appendChild方法分析

var thumbBar = document.querySelector('.thumb-bar');
for(var i = 1; i <= 5; i++) {var newImage = document.createElement('img');newImage.setAttribute('src', 'images/pic' + i + '.jpg');thumbBar.appendChild(newImage);newImage.onclick = on_newImage_click;
}

这段代码是遍历5张图片并将它们分别加入到thumb-bar容器中,这里先新建一个img标签，然后设定它的src，然后用appendChild加入到thumBar中，也就是thumb-bar容器中。也就是说appendChild并不仅仅局限于添加列表

js中appendChild的用法相关推荐

JS中typeof的用法
转载自 JS中typeof的用法 js是一门弱语言,它在声明变量时无需确定变量的类型,js在运行时会自动判断.那么如何判断一个变量的类型呢,js提供了typeof运算符,用来检测一个变量的类型. 1 ...
php function函数用法,js的function函数是什么？js中function的用法
本篇文章给大家带来的内容是关于js的function函数是什么?js中function的用法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Function与函数 Function是 ...
js中indexOf的用法详解
js中indexOf的用法详解 String.IndexOf 方法 (Char, [startIndex], [count]) 报告指定字符在此实例中的第一个匹配项的索引.搜索从指定字符位置开始,并检 ...
js控制页面滚动到指定位置，js中scrollIntoView()的用法
js中scrillIntoView()的用法--页面滚动到指定位置最近遇到一个问题,在一个页面上,点击某个按钮时,滚动到页面的某一位置. 如图: 如果是我写的话,我可能会先获取滚动到的元素,然后获取 ...
js中return的用法
js中return的用法今天看到一篇文章,介绍的是js中return的用法,感触很深.(类似于JAVA return) 在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默 ...
innerHTML连接指定HTML文件,js中innerhtml的用法
js中innerHTML与innerText的用法与区别 js中innerHTML的用法: innerHTML可获取或设置指定元素标签内的 html内容,从该元素标签的起始位置到终止位置的全部内容(包 ...
JS中reduce的用法
JS中reduce的用法前言语法举例 reduce的应用总结前言 reduce() 方法对数组中的每个元素执行一个由您提供的reduce函数(升序执行),将其结果汇总为单个返回值.reduc ...
原生js html insert,js中AppendChild与insertBefore的用法详细解析
appendChild定义appendChild(newChild: Node) : Node Appends a node to the childNodes array for the node. ...
php中正则表达式用法,php与js中的正则表达式用法
1. php中的正则: if(preg_match('/^[^x00-xff]+$/', $_POST['password']) || !preg_match('/^\w+$/', $_POST['p ...

js中appendChild的用法

js中appendChild的用法相关推荐

最新文章

热门文章