前言
:
创建元素有两种方法
1)将需要创建的元素,以字符串的形式拼接;找到父级元素,直接对父级元素的innnerHTML进行赋值。
2)使用Document、Element对象自带的一些函数,来实现动态创建元素(创建元素 => 找到父级元素 => 在指定位置插入元素)
一、字符串拼接形式
为了更好的理解,设定一个应用场景。
随机生成一组数字,将这组数据渲染为条形图的形式,放在div[id="container"]中,如下图
rush:xhtml;">
也设定一个应用场景,如下图
获取input中的信息,根据右边的按钮,分别插入到下方红色矩形的左边或者右边。
解决思路分三步
:- 创建元素:Document.createElement()
- 找到父级元素 :可以通过Id、name、标签名、class、匹配指定的css选择器
- 在指定位置插入元素:element.appendChild()、element.insertBefore()
实现代码:
rush:js;">
1
2
3
以上这篇浅析JS动态创建元素【两种方法】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/js/49228.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。