lovecoding
/
VIP23


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li id="sz">深圳</li>
        <li>广州</li>
    </ul>

</body>
<script>
    //添加城市
    // let li = document.createElement("li")
    //
    // let liText = document.createTextNode("哈尔滨")
    //
    // //文本添加到元素中
    // li.append(liText)
    //
    // //找到ul
    // let ul = document.getElementsByTagName("ul")[0];
    //
    // ul.appendChild(li);
    //
    // //找到广州
    // let liGuangZhou = document.getElementsByTagName("li")[3];
    // //执行删除
    // liGuangZhou.remove();

    //替换 北京 沈阳
    let pUl = document.getElementsByTagName("ul")[0];

    //旧
    liBeiJing = document.getElementsByTagName("li")[0];

    //新
    let liShenYang = document.createElement("li")

    let liShenYangText = document.createTextNode("沈阳")

    //文本添加到元素中
    liShenYang.append(liShenYangText)

    pUl.replaceChild(liShenYang,liBeiJing);

    //添加
    //找到深圳
    let liShenZhen = document.getElementById("sz");

    let liChangChun = document.createElement("li")

    let liChangChunText = document.createTextNode("长春")

    //文本添加到元素中
    liChangChun.append(liChangChunText)

    pUl.insertBefore(liChangChun,liShenZhen)

    //点击
    let liInnerHtml = "<li>北京</li>"

    //pUl.innerHTML +=  liInnerHtml;


    //innerHTML 特点 可以识别 元素标签

    pUl.innerText += liInnerHtml

    //innerText 特点：当做文本处理 不能解析标签

</script>
</html>