查找并用jQuery替换HTML

Question

I am trying to do a Bookmarklet or Browser extension that will modify another website when I view it, more specifically I am trying to use a Javascript Markdown editor with button bar like Stackexchange uses on another website that I do not own so I must do it with a bookmarklet or extension.

Right now I need to find the textarea on a page and replace it with a different block of code like below. The page does have jQuery so I can use that... IF you can show me how to do this I would really appreciate it, thanks

Find

<textarea rows="10" cols="50" name="description" id="description" tabindex="4"></textarea>

Replace with...

<div class="wmd-panel">
    <div id="wmd-button-bar"></div>
    <textarea class="wmd-input" id="wmd-input" name="description"></textarea>
</div>

<div id="wmd-preview" class="wmd-panel wmd-preview"></div>

Answer 1

Sure. we just need to simply replace the HTML, like so:

var htmlToReplace = ' \
  <div class="wmd-panel"> \
    <div id="wmd-button-bar"></div> \
      <textarea class="wmd-input" id="wmd-input" name="description"></textarea> \
  </div> \
  <div id="wmd-preview" class="wmd-panel wmd-preview"></div>';

$("#description").replaceWith(htmlToReplace)

And that'll do the trick for you.

Answer 2

Check out .replaceWith()

http://api.jquery.com/replaceWith/

$("#description").replaceWith('ALL YOUR CODE');

You can use more Selectors if you need to match attributes or other characteristics