Speed up development with full-stack environments for every branch.

Learn More

Setting an element content using jQuery html function

Forked from How to use the jQuery UI Slider.

506 Runs 3991 Views 429 Copies
Saved

Saved

pg1 45

pg1
published 4 years ago

<!doctype html>
<html>
<head>

    <title>Setting an element content using jQuery html function</title>
    
    <style>
        body{
            text-align: center;
            font-family: arial;
        }

        .button{
            margin-top:20px;
            font-size:16px;
            font-weight: bold;
            padding:5px 10px;
        }

        .input{
            padding: 3px;
        }
        
        .box{
            margin:50px auto;
            width:400px;
            height:100px;
            color:#fff;
            padding:10px;
            background: orange;
        }

    </style>


</head>
<body>
    <input type="text" value="Enter <u>html</u> code here" class="input" size="30" /><br />
    <input class="button" type="button" value="Set box content from input" />
    
    <div class="box">Box</div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

        //When DOM loaded we attach click event to button
        $(document).ready(function() {
           
            //when button is clicked get the input value and change the html of the box 
            $('.button').click(function(){

                //select box and call html method
                $('.box').html($('.input').val());
            });
        });

    </script>

</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).