CODEWITHSUNDEEP
javascriptjquery
CodeDevelopr
CodeDevelopr

Reputation: 1265

Find and replace HTML with jQuery

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>

Upvotes: 1

Views: 3517

Answers (2)

Connor
Connor

Reputation: 4168

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.

Upvotes: 5

Matt Urtnowski
Matt Urtnowski

Reputation: 2566

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

Upvotes: 0

Related Questions