用另一个元素替换HTML元素

Question

I'm trying to get an img element with an id of origImg to turn into an iframe element with the id video when certain keys are pressed. I don't know any javascript, so how can i do this?

Answer 1

1. Bind the keyup event to something that can capture keystrokes, for my example, the document captures keystrokes.

2. Then, evaluate which key was pressed. Simply watching jQuery's event.which will handle browser support.

3. Then, use jQuery's .replaceWith() to replace an existing HTML element with a new element.

This should be all you need.

Edit

If you need multiple characters, you need to set their values to an array and check for the existence, super easy.

var accepted = ['13', '8', '9', '40'];

$(document).on('keyup', function(e){
    if($.inArray(e.which, accepted){
        $('#origImg').replaceWith('<iframe id="video"/>');
    }
});