JS中button,input,textarea使用value，innerHTML,innerText的区别

快意人生大社畜

已于 2023-07-07 11:44:31 修改

阅读量840

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端 html

于 2022-09-04 15:27:56 首次发布

本文链接：https://blog.csdn.net/weixin_72322475/article/details/126685928

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

1.JS中value，innerHTML,innerText的区别:

（1）value针对表单的值 e.g.<input></input>，<textarea></textarea>,<select></select>>

（2）innerHTML,innerText针对普通盒子的值 e.g,div,li,p等等

2.JS中button,input,textarea使用value，innerHTML,innerText的区别：

（1）input可以用value修改表单值

（2）button可用innerHTML/innerText修改值

（3）当textarea中有内容时 value/innerHTML/innerText都无法修改其值

（4）4.当textarea中无内容时 value/innerHTML可修改其值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" value='123'>
    <button>天气好</button>
    <textarea name="" id="txt1" cols="30" rows="10">苹果</textarea>
    <textarea name="" id="txt2" cols="30" rows="10"></textarea>
    <script>
        var ipt = document.querySelector('input');
        var btn = document.querySelector('button');
        var txt1 = document.getElementById('txt1');
        var txt2 = document.getElementById('txt2');
        // 1.input可以用value修改表单值
        ipt.addEventListener('click', function () {
            ipt.innerHTML = '456';//无反应
            ipt.innerText = '722';//无反应
            ipt.value = '678';//可以点击后改为678
        });
        // 2.button可用innerHTML/innerText修改值
        btn.addEventListener('click', function () {
            btn.value = '990';//无反应
            btn.innerHTML = '880';//可以点击后改为880
            btn.innerText = '770';//可以点击后改为770
        })
        // 3.当textarea中有内容时 value/innerHTML/innerText都无法修改其值
        txt1.addEventListener('click', function () {
            txt1.value = '660';//无反应
            txt1.innerHTML = '440';//无反应
            txt1.innerText = '330';//无反应

        })
        // 4.当textarea中无内容时 value/innerHTML可修改其值
        txt2.addEventListener('click', function () {
            txt2.value = '220';//可以点击后可以出现220
            txt2.innerHTML = '110';//可以点击后可以出现110
            txt3.innerText = '100';//无反应
        })
    </script>
</body>

</html>