1

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>
CodeDevelopr
  • 1,267
  • 3
  • 17
  • 30

2 Answers2

5

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.

Connor
  • 4,138
  • 8
  • 34
  • 51
  • Looks great, maybe you can help some with the bigger question that will use this code http://stackoverflow.com/questions/10544597/include-external-javascript-and-css-files-into-another-sites-dom thanks for the help! – CodeDevelopr May 11 '12 at 02:54
0

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

Matt Urtnowski
  • 2,556
  • 1
  • 18
  • 36