js基础知识（二十七）--DOM对象的创建、插入

一、创建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);
            };
        };