DOM API中append和appendChild的三个不同点
source link: http://mp.weixin.qq.com/s?__biz=MzI0MDIwNTQ1Mg%3D%3D&%3Bmid=2676493934&%3Bidx=1&%3Bsn=b51a0fa4553a9c63c22eb8fca8be4efc
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
append和appendChild是两个常用的方法,用于将元素添加到文档对象模型(DOM)中。它们经常可以互换使用,没有太多麻烦,但如果它们是一样的,那么为什么要出现两个API呢?……它们只是相似,但不是一样。
目录
-
.append()
-
插入一个Node对象
-
插入DOMString
-
-
.appendChild()
-
插入一个Node对象
-
插入DOMString
-
-
不同点
-
总结
.append()
此方法用于以Node对象或DOMString(基本上是文本)的形式添加元素。
插入一个Node对象
const parent = document.createElement('div'); const child = document.createElement('p'); parent.append(child); // 这会将子元素追加到div元素 // 然后div看起来像这样<div> <p> </ p> </ div>
这会将子元素追加到 div
元素,然后 div
看起来像这样
<div> <p> </ p> </ div>
插入DOMString
const parent = document.createElement('div'); parent.append('附加文本');
然后 div
看起来像这样的
<div>附加文本</ div>
.appendChild()
与 .append
方法类似,该方法用于DOM中的元素,但在这种情况下,只接受一个Node对象。
插入一个Node对象
const parent = document.createElement('div'); const child = document.createElement('p'); parent.appendChild(child);
这会将子元素追加到 div
元素,然后 div
看起来像这样
<div> <p> </ p> </ div>
插入DOMString
const parent = document.createElement('div'); parent.appendChild('Appending Text'); // Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
不同点
.append
接受Node对象和DOMString,而 .appendChild
只接受Node对象。
const parent = document.createElement('div'); const child = document.createElement('p'); // 追加节点对象 parent.append(child) // 工作正常 parent.appendChild(child) // 工作正常 // 追加DOMStrings parent.append('Hello world') // 工作正常 parent.appendChild('Hello world') // 抛出错误
.append
没有返回值,而 .appendChild
返回附加的Node对象。
const parent = document.createElement('div'); const child = document.createElement('p'); const appendValue = parent.append(child); console.log(appendValue) // undefined const appendChildValue = parent.appendChild(child); console.log(appendChildValue) // <p><p>
.append
允许您添加多个项目,而 .appendChild
仅允许单个项目。
const parent = document.createElement('div'); const child = document.createElement('p'); const childTwo = document.createElement('p'); parent.append(child, childTwo, 'Hello world'); // 工作正常 parent.appendChild(child, childTwo, 'Hello world'); // 工作正常,但添加第一个元素,而忽略其余元素
总结
在可以使用 .appendChild
的情况下,可以使用 .append
,但反过来不行。
前端大礼包新增课程了:100:
新增课程 《再学JavaScript ES(5-10)全版本语法大全》 ,学习当下和未来大热技术!公众号中 回复关键字:“前端大礼包” 即可获取,不定期新增新课程,新增课程都会通知大家。
近期文章
你知道Object.entries(),但你还知道有Object.fromEntries()吗?
仅3行核心CSS代码的rate评分组件
使用JavaScript的padStart和padEnd格式化字符串
Vue 3教程(适用于Vue 2用户)
JavaScript vs Dart 两者之间的比较
不要过度使用React.useCallback()
HTML页面生成器:使用JavaScript和Node创建CLI
React.js和Vue.js的语法并列比较
从零开始使用JavaScript制作自己的命令行(CLI工具)
Vue.js中编写更好的v-for循环的6种技巧
如果对你有帮助,还可以 在看、留言、 转发 ,这是对作者最大的帮助。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK