DEV Community
·
JavaScript 第三天：学习一些 JS 数据类型以及在 JS 中创建和移除元素
内容提要
null表示无值的变量，undefined表示已声明但未赋值的变量。字面量是代码中的固定值，模板字面量使用反引号定义并允许嵌入表达式。使用document.createElement()方法创建元素，添加文本后可通过appendChild()将其添加到DOM中。
关键要点
-
null表示显式赋值为无值的变量，表示'无'或'无值'。
-
undefined表示已声明但未赋值的变量。
-
字面量是直接写入代码中的固定值，代表数据值如数字、字符串、布尔值、数组、对象和函数。
-
模板字面量允许在代码中嵌入表达式，用反引号定义。
-
使用document.createElement()方法可以在JavaScript中创建元素，并通过appendChild()将其添加到DOM中。
-
创建元素的基本语法是let element = document.createElement('tagName')。
-
可以通过设置textContent、innerHTML或属性来设置元素的内容，并使用appendChild()或append()将其添加到DOM中。
-
可以通过document.getElementById('myElement').remove()来移除元素。
延伸解读
理解null与undefined的区别
在JavaScript中，null和undefined虽然都表示“无值”，但它们的使用场景不同。null是一个显式的赋值，表示变量故意没有值；而undefined则表示变量已声明但尚未赋值。理解这两者的区别有助于更好地调试代码，避免不必要的错误。
模板字面量的优势
模板字面量使用反引号定义，允许在字符串中嵌入表达式，这使得字符串拼接更加简洁和易读。相比传统的字符串拼接方式，模板字面量可以减少代码的复杂性，提升开发效率，尤其在处理动态内容时更为方便。
动态创建和移除DOM元素的实用性
使用document.createElement()和appendChild()方法可以动态创建和添加HTML元素，这在构建交互式网页时非常重要。同时，了解如何使用remove()方法移除元素，可以帮助开发者更灵活地管理页面内容，提升用户体验。
延伸问答
null和undefined有什么区别？
null表示显式赋值为无值的变量，而undefined表示已声明但未赋值的变量。
什么是字面量？
字面量是直接写入代码中的固定值，代表数据值如数字、字符串、布尔值、数组、对象和函数。
如何在JavaScript中创建一个新的DOM元素？
使用document.createElement('tagName')方法创建元素，'tagName'是元素类型，如'div'或'p'。
模板字面量是什么？
模板字面量是允许在字符串中嵌入表达式的字面量，用反引号定义。
如何将创建的元素添加到DOM中？
可以使用appendChild()或append()方法将创建的元素添加到DOM中。
如何移除一个DOM元素？
可以通过document.getElementById('myElement').remove()来移除元素。
