上一篇文章中我们使用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