美文网首页
value & setAttribute & innerHTML

value & setAttribute & innerHTML

作者: xiaolin_188 | 来源:发表于2016-11-12 17:52 被阅读0次
    <!DOCTYPE html>
    <html lang="cn">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
    <input type="text" name="username" id="username" value="" data=""/>
    <div id="content"></div>
    <input type="button" value="点击-js" onclick="btn();">
    <input type="button" value="点击-jQuery" id="btn">
    <script>
    function btn() {
        //设置input值
        document.getElementById('username').value = 'xiaolin_188';
        
        //获取input值
        var username = document.getElementById('username').value;
        alert(username);
        
        //设置html内容
        document.getElementById('content').innerHTML = '<p>内容</p>';
        
        //获取html内容
        var content_html = document.getElementById('content').innerHTML;
        alert(content_html);
        
        //获取text内容
        var content_text = document.getElementById('content').innerText;
        alert(content_text);
        
        //设置text内容
        document.getElementById('content').innerText = '内容1';
        
        //设置属性值
        document.getElementById('username').setAttribute('data', '123456');
        
        //获取属性值
        var data = document.getElementById('username').getAttribute('data');
        alert(data);
    }
    $('#btn').click(function() {
        //设置input值
        $('#username').val('xiaolin_188');
        
        //获取input值
        var username = $('#username').val();
        alert(username);
        
        //设置html内容
        $('#content').html('<p>内容</p>');
        
        //获取html内容
        var content_html = $('#content').html();
        alert(content_html);
        
        //获取text内容
        var content_text = $('#content').text();
        alert(content_text);
        
        //设置text内容
        $('#content').text('内容1');
        
        //设置属性值
        $('#username').attr('data', '123456');
        
        //获取属性值
        var data = $('#username').attr('data');
        alert(data);
    });
    </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:value & setAttribute & innerHTML

          本文链接:https://www.haomeiwen.com/subject/fyyqpttx.html