JS DOM 编程复习笔记--appendChild、textContent、innerText、innerHTML（五）

上一篇文章中我们使用appendChild()方法将我们创建的DOM元素插入到指定的父元素的最后位置。今天我们继续来看看这几个API，textContent、innerText、innerHTML，它们都是比较常用的，用来获取和设置HTML的内容或者标签。下面我们从appendChild开始

appendChild()

我们来复习一下语法

parentNode.appendChild(childNode);

appendChild()将传入的childNode插入到parentNode的最后一个子元素的后面，并返回插入的元素。

如果childNode是页面中已经存在的DOM节点，那么appendChild()方法将会把childNode从原来的位置移动到新的位置。

先来回顾一下appendChild()基础使用

基础用法例子

<ul id="menu">
</ul>

<script>
function createMenuItem(name) {
     
     
  let li = document.createElement('li');
  li.textContent = name;
  return li;
}
  
// 获取ul#menu元素
const menu = document.querySelector('#menu');
// 添加子元素
menu.appendChild(createMenuItem('首页'));
menu.appendChild(createMenuItem('产品'));
menu.appendChild(createMenuItem('关于我们'));

</script>

运行后，HTML如下

移动节点例子

我们的HTML如下

<ul id="first-list">
  <li>HTML</li>
  <li>CSS