Change values of elements inside Div using JavaScript.

Question

I have the following div

<div class="modal hide" id="changeProject">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3><?php echo __('Change Project') ?></h3>
    </div>
    <div class="modal-body">
        <form id="frmChangeProject">
            <fieldset>
                <ol>
                    <?php echo $changeProjectForm->render(); ?>
                </ol>
            </fieldset>
        </form>
    </div>
    <div class="modal-footer">
        <input type="button" id="dialogChange" class="btn" value="<?php echo __('Edit'); ?>" />
        <input type="button"  id="dialogCancel" name="dialogCancel" class="btn reset" data-dismiss="modal" value="<?php echo __('Cancel'); ?>" />
    </div>
</div>

Using JS I want to change the value of <h3></h3> element. also I want to use that magic function for the purpose of localization.

Answer 1

Using jquery, you can call this after an event:

$(".modal-header h3").html("your new header");

It will look for the h3 element inside of the .modal-header class and change it.