append函数是什么意思(python入门详细教程)
append和appendChild是两个常用的方法,用于将元素添加到文档对象模型(DOM)中。它们经常可以互换使用,没有太多麻烦,但如果它们是一样的,那么为什么要出现两个API呢?……它们只是相似,但不是一样。
append()
此方法用于以Node对象或DOMString(基本上是文本)的形式添加元素。
插入一个Node对象
const parent = document.createElement('div');
const child = document.createElement('p');
parent.append(child);
// 这会将子元素追加到div元素
// 然后div看起来像这样 p> div>
这会将子元素追加到 div 元素,然后 div 看起来像这样
p> div>
插入DOMString
const parent = document.createElement('div');
parent.append('附加文本');
然后 div 看起来像这样的
附加文本 div>appendChild()
与 .append 方法类似,该方法用于DOM中的元素,但在这种情况下,只接受一个Node对象。
插入一个Node对象
const parent = document.createElement('div');
const child = document.createElement('p');
parent.appendChild(child);
这会将子元素追加到 div 元素,然后 div 看起来像这样
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) //
.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,但反过来不行。
如果对你有所启发和帮助,可以点个关注、收藏、转发,也可以留言讨论,这是对作者的最大鼓励。
作者简介:Web前端工程师,全栈开发工程师、持续学习者。
推荐资源
黑马C/C++ 24期就业班(高清不加密)
抖音视频文案运营技巧教程:注册-养号-发作品-涨粉方法(10节视频课)
2020版【千锋】教你玩转海报设计教程(设计师必备)
Python数据科学-技术详解与商业实践(八大案例,配套书籍)完整视频教程
Node.js开发实战 完结
亲测狮子鱼社区团购小程序V11.7.0
跨平台混编框架MUI仿豆瓣电影APP
2020年最新 基础SSM水果商城网站开发【完整资料】
价值888元 极客时间-微服务架构核心20讲视频教程
马大个素人网红孵化课:通过长期稳定变现,倒推账号定位,自我创号与选人孵化
相关推荐