一、创建DOM对象
document.createElement(‘TagName’):用来格局标签名来创建一个新元素节点
appendChild():用于向父节点中添加子节点;
语法:父节点.appendChild(子节点)
document.createTextNode(文本内容):用于创建一个新的文本节点
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<ul id="list">
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙和尚</li>
<li>唐僧</li>
</ul>
window.onload = function () {
// 点击按钮后,创建一个新的li元素
document.getElementById('btn1').onclick = function () {
//获取id为list的ul
let list = document.getElementById('list');
// 创建一个新的li元素
let li = document.createElement('li');
// 创建一个新的文本节点
let text = document.createTextNode('白骨精');
// 将text设置为li的子节点
li.appendChild(text);
// 将li添加到list中
list.appendChild(li);
};
document.getElementById('btn2').onclick = function () {
let list = document.getElementById('list');
let li = document.createElement('li');
li.innerHTML = '蜘蛛精';
list.appendChild(li);
};
};
insertAdjacentElement(‘position’,element):用来将一个元素插入到指定元素的指定位置
参数1:传一个插入的位置
beforebegin:开始标签前
afterbegin:开始标签后(元素的开头)
beforeend:结束标签前(元素的结尾)
afterbegin:结束标签后
参数2:被插入元素
insertAdjacentHTML(‘position’,‘html代码’):在元素的指定位置插入html代码
insertAdjacentText():在元素的指定位置插入文本内容
将某个元素插入到指定元素的前边:
父元素.insertBefore(新节点,旧节点);将指定节点插入到某节点前边
父元素.replaceChild(新节点,旧节点);使用新节点替换旧节点
// 点击按钮后,创建一个新的li元素
document.getElementById('btn1').onclick = function () {
let list = document.getElementById('list');
// let li = document.createElement('li');
// li.innerHTML = '玉兔精';
// list.insertAdjacentElement('afterbegin', li);
list.insertAdjacentHTML('afterbegin', '<li>二郎神</li>');
};
document.getElementById('btn2').onclick = function () {
// 获取list
let list = document.getElementById('list');
// 获取shs的li
let shs = document.getElementById('shs');
let li = document.createElement('li');
li.innerHTML = '牛魔王';
// shs.insertAdjacentElement('beforebegin', li);
// list.insertBefore(li, shs);
list.replaceChild(li, shs);
};
};