<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="wrap"><b>yang</b> tian xuan</div>

<input type="text" id="inp">
<button id="btn">按钮</button>
<script>
    /*
    * innerHTML
    *获取时可以显示标签名字 添加时可以加入标签并显示效果
    * innerText 火狐低版本只能用.textContent
    *获取时不能显示标签名字 添加时加入标签没有效果
    * value
    * 在使用input时用的是value  内容存在value中
    */
    let oWrap = document.getElementById('wrap');

    console.log(oWrap.innerText); //>>yang tian xuan

    console.log(oWrap.innerHTML); //>><b>yang</b> tian xuan

    //text不能解析语句中的标签
    // oWrap.innerText = '<b>xuan</b>好看';

    //html可以解析语句中的标签
    //oWrap.innerHTML = '<b>xuan</b>好看';

    let oBtn = document.getElementById('btn');
    let oInp = document.getElementById('inp');

    oBtn.onclick = function () {
        alert(oInp.value);
    };
</script>
</body>
</html>