Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >这种在JavaScript中创建html元素的方法被认为过时了吗?

这种在JavaScript中创建html元素的方法被认为过时了吗?
EN

Stack Overflow用户
提问于 2020-09-04 05:47:00
回答 2查看 49关注 0票数 0

在较新版本的JavaScript中,我知道如果你想在JavaScript中创建和createElement()元素,那么你必须使用appendChild()。然而,我偶然发现了这种使用Jquery创建html元素的方法,我想知道它是否过时了?

代码语言:javascript
运行
AI代码解释
复制
 $("#options").html("<option value='Millimetre'>Millimetre</option>")

谢谢你的回答!

EN

回答 2

Stack Overflow用户

发布于 2020-09-04 05:58:20

这并不是说它过时了,而是这种语法依赖于jQuery库,而且jQuery仍然关心命令式DOM操作。如今,大多数UI框架都使用声明性模式,因为它们更易于开发人员创作和推理。声明性模式使复杂性更接近我们可以处理的程度,而不是要求我们的大脑更接近突变逻辑的复杂性。

但我们可以去掉jQuery并做基本上相同的事情:

  1. 使用.innerHTML

创建包含HTML标记的字符串

  • 将该字符串插入到文档中

人们不喜欢使用HTML字符串是有原因的,它有时被称为“标签汤”:

  • 没有什么可以防止基本的打字错误或者像嵌套错误这样的标记错误
  • 标签汤很难读,因为即使在带有智能语法突出显示的编辑器中,标签汤也只是一个字符串,所以它将全部是一种颜色
  • 一些在HTML中有效的字符需要在标签汤中转义,这使得它更难阅读
  • 标签汤的长字符串通常会造成非常长的代码行;非常长的代码行对于人类来说很难阅读,并且不能很好地区分;有一些模式可以缓解这种情况,但这是一个额外的麻烦,您必须处理

也就是说,tag soup有一个非常大的好处:更好的运行时性能。DOM操作通常是javascript在浏览器中执行的最慢的事情之一。我最近没有运行测试,但在过去,一次DOM操作通常需要大约100ms。这看起来可能很快,但如果您向文档中添加数百或数千个节点,那么时间加起来可能会有几秒钟。设置innerHTML也是一个DOM操作,但是这个操作可以一次创建、修改或删除成百上千个元素。是的,添加数千个元素的innerHTML操作可能比只添加5个元素的innerHTML操作慢,但它仍然可能比使用单个操作添加每个元素快至少一个数量级。

少担心你正在做的事情是“酷”还是“尖端”。专注于你是否使用了正确的工具来完成工作,该工具是否使你的工作变得更容易或更难,该工具是否在你所关心的所有平台和时间跨度上都是可靠的。

取悦酷孩子不是你的工作。你的工作就是以最明显的方式,为正确的理由,写出能做正确事情的软件。

票数 2
EN

Stack Overflow用户

发布于 2020-09-04 06:03:25

几乎所有关于Jquery的东西都被认为是过时的,这就是为什么像Github和frameworks as Bootstrap这样的网站正在放弃使用Jquery。

不过时的代码实际上是自己用createElement()处理DOM (这是Jquery在幕后做的),但正如您所说的那样,自己做这些事情会变得相当复杂

因此,替代方案是:

  • 使用web前端框架,如Angular、React或Vue
  • 使用现代库来处理DOM更新

并不是说Jquery是无用的,它仍然可以完成工作,但有许多原因不再使用,其中大多数原因是因为JS获得了许多现在是本机的新功能,并且不需要使用Jquery提供的更多代码来重新实现。

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63735503

复制
相关文章
java获取数组最大值索引_java数组最大值最小值
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/10/29
2.6K0
较快速在一个数组中查找最大值和最小值
#include<stdio.h> #define MAX 100001 int a[MAX]; int n; /* 时间复杂度为3*n/2 */ void swap(int i) { if(i==n-1) return ; if(a[i]>a[i+1]) { int temp=a[i]; a[i]=a[i+1]; a[i+1]=temp; } } void sort() { int i; for(i=0;i<n;i++) { swap(i); i++; }
chain
2018/08/02
3.7K0
统计numpy数组中最频繁出现的值
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/119565.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/09
1K0
统计numpy数组中最频繁出现的值
arr = np.array([[1,2,100,4,5,6],[1,1,100,3,5,5],[2,2,4,4,6,6]]) 方法一: count = np.bincount(arr[:,2]) # 找出第3列最频繁出现的值 value = np.argmax(count) 方法二: from collections import Counter value = Counter(arr[:,2]).most_common()
py3study
2020/02/10
2.8K0
Numpy根据Bool值挑选数组中元素
使用Boolean类型的数组挑选一维数组中的值 使用一维Boolean数组选取数组中的特定元素,对应位置为True则选取,为False则不选取 import numpy as np i_=[2] # 挑选第三行数据 pop=np.arange(12).reshape(3,4) print("pop(3,4)\n",pop) bool=np.array([0,0,1,1]).astype("bool") # [False,False,True,True] # 使用数组作为索引选择个体 pop_i_=po
演化计算与人工智能
2020/08/14
1.8K0
numpy 插值
第二个参数是需要pad的值,参数输入方式为:((before_1, after_1), … (before_N, after_N)),其中(before_1, after_1)表示第1轴两边缘分别填充before_1个和after_1个数值;
全栈程序员站长
2022/09/22
6750
numpy 插值
较快速在一个数组中查找最大值和最小值(2)
/*分治法*/ #include<iostream> #include<string> #include<vector> #include<fstream> using namespace std; int a[16]={1,3,5,7,9,11,14,2,4,6,8,10,12,14,16,18}; int b[9]={3,1,5,9,4,2,7,6,10}; int t[2]; vector<string> splitEx(const string& src, string separate_chara
chain
2018/08/02
2.6K0
numpy.clip使数组中的值保持在一定区间内
给定一个区间范围,区间范围外的值将被截断到区间的边界上。例如,如果指定的区间是 [-1,1],小于-1 的值将变为-1,而大于 1 的值将变为 1。
狼啸风云
2020/12/29
2K0
一个数组中找最大值和最小值
这个不是lintcode里的题目,但是感觉很经典,放在这里。 给定一个数组,在这个数组中找到最大值和最小值。 最近在看一点算法书,看到分治法经典的金块问题,实质就是在一个数组中找到最大值和最小值的问题。 我们用分治法来做,先把数据都分成两两一组,如果是奇数个数据就剩余一个一组。 如果是偶数个数据,就是两两一组,第一组比较大小,分别设置为max和min,第二组来了自己本身内部比较大小,用大的和max进行比较,决定是否更新max,小的同样处理,以此类推。 如果是奇数个数据,就把min和max都设为单个的那个数据,其他的类似上面处理。 书上说可以证明,这个是在数组中(乱序)找最大值和最小值的算法之中,比较次数最少的算法。 瞄了一眼书上的写法,还是很简单的,一遍过。
和蔼的zhxing
2018/09/04
2.6K0
numpy创建数组
NumPy系统是Python的一种开源的数值计算扩展。这种工具可用来存储和处理大型矩阵,比Python自身的嵌套列表(nested list structure)结构要高效的多(该结构也可以用来表示矩阵(matrix))。
全栈程序员站长
2022/06/26
1.6K0
numpy创建数组
pycharm查找与替换_python替换dataframe中的值
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/175276.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/27
6.1K0
判断某个值是否在多维关联数组中 返回该值的所在的关联数组
public function deep_in_array($value, $array) { foreach($array as $item) { if(!is_array($item)) { if ($item == $value) { return $item; } else { continue; } } i
OwenZhang
2021/12/08
5.3K0
在Python机器学习中如何索引、切片和重塑NumPy数组
在Python中,数据几乎被普遍表示为NumPy数组。
用户9527
2018/02/02
19.2K0
js数组索引值为小数,数组长度为多少
// 数组索引值为浮点型 // array 小数点索引值 不会增加数组长度,但是如果后面又加了array索引值 赋值,赋值在第几位,前几位长度就都有了 // 不占用数组元素个数,不改变数组长度,以key:value形式存在 var arr1 = []; arr1[0.5] = 2; arr1[1] = 3; console.log(arr1); // [ <1 empty item>, 3, '0.5': 2 ] console.log(arr1.length); arr1[3] = 3; console.
蓓蕾心晴
2022/06/12
3.6K0
Pandas中替换值的简单方法
在处理数据时,编辑或删除某些数据作为预处理步骤的一部分。这可能涉及从现有列创建新列,或修改现有列以使它们适合更易于使用。为此,Pandas 提供了多种方法,您可以使用这些方法来处理 DataFrame 中所有数据类型的列。
deephub
2021/08/20
5.6K0
python文字转图片(二值、RGB)以及numpy数组
文字一般使用unicode等编码的形式在计算机中表示,但是其形态本身也很有价值。如果能够把文字转为图片,就可以做一些应用,比如:
blmoistawinde
2020/05/09
5.1K0
python文字转图片(二值、RGB)以及numpy数组
Java中获取一个数组的最大值和最小值
3,然后对数组进行遍历循环,若循环到的元素比最大值还要大,则将这个元素赋值给最大值;同理,若循环到的元素比最小值还要小,则将这个元素赋值给最小值;
程序员的时光001
2020/07/14
6.5K0
PostgreSQL中索引是否存储空值?
偶然在PostgreSQL官方文档上看到这句话:an IS NULL or IS NOT NULL condition on an index column can be used with a B-Tree index。
数据库架构之美
2021/03/16
2.4K0
js获取数组中的最大值最小值
遍历方法: var tmp = [1,12,8,5]; var max = tmp[0]; for(var i=1;i<tmp.length;i++){ if(max<tmp[i])max=tmp[i]; } console.log(max); 使用apply方法: var a = [1,2,3,5]; console.log(Math.max.apply(null, a));//最大值 console.log(Math.min.apply(null, a));//最小值 多维数组可以这
deepcc
2018/05/16
36.8K0
点击加载更多

相似问题

码头集装箱无法与码头码头的postgres集装箱连接

13

gcloud码头推送可靠性

39

码头集装箱与码头码头联网

35

在码头集装箱内运行码头集装箱

13

配置库码头集装箱与领事码头集装箱

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文