JasonDavis JasonDavis - 6 months ago 20
Javascript Question

Wrap HTML structure around an existing HTML element using jQuery

I am building a jQuery plugin which will take any HTML textarea and wrap it wth a header toolbar with BBCode style buttons for inserting Markdown syntax into the textarea. It will also add a DIV which will parse the Markdown into HTML as a live preview which will show up next to the textarea.

I want to be able to simply run this jQuery code...

$('.markdown-editor-textarea').markdownEditor();


and have it take my HTML template which is stored in a JavaScript string variable and have it basically generate this HTML below wrapped arouynd the original textarea with CSS class
markdown-editor-textarea


<div class="editor-content-wrapper">
<div class="editor-toolbar">
// buttons here
</div>
<div class="editor-code">
<textarea class="markdown-editor-textarea"></textarea>
</div>
<div class="editor-preview">
<div>Markdown parsed from left panel into HTML preview in this right panel</div>
</div>
</div>


Prior to running my jQuery code. THe only HTML that will exist will be

<textarea class="markdown-editor-textarea"></textarea>


and after running the code it will look like the HTML template above this




So I need help in wrapping this HTML above around the original textarea that is found with the selector
$('.markdown-editor-textarea')





Preview to give an idea of what I am doing...

enter image description here




UPDATE

Here is what I have tried so far...

HTML

<textarea class="markdown-editor-textarea"></textarea>


JavaScript/jQuery

$('.markdown-editor-textarea').wrap('<div class="editor-content-wrapper"><div class="editor-toolbar"></div><div class="editor-code"></div><div class="editor-preview"><div>Markdown parsed from left panel into HTML preview in this right panel</div></div></div>');


The result is this...

<div class="editor-content-wrapper">
<div class="editor-toolbar">
<textarea class="markdown-editor-textarea2"></textarea>
</div>
<div class="editor-code"></div>
<div class="editor-preview">
<div>Markdown parsed from left panel into HTML preview in this right panel</div>
</div>
</div>


So this will not work as I need it to instead be like this...

<div class="editor-content-wrapper">
<div class="editor-toolbar"></div>
<div class="editor-code">
<textarea class="markdown-editor-textarea2"></textarea>
</div>
<div class="editor-preview">
<div>Markdown parsed from left panel into HTML preview in this right panel</div>
</div>
</div>

Answer

In the plugin you can replace the textarea with the template and then add the textarea back to the element

(function($) {

  var template = '<div class="uk-htmleditor-content">\
  <div class="editor-toolbar">\
    // buttons here\
  </div>\
  <div class="editor-code">\
    \
  </div>\
  <div class="editor-preview">\
    <div>Markdown parsed from left panel into HTML preview in this right panel</div>\
  </div>\
</div>';

  $.fn.markdownEditor = function() {
    return this.each(function() {
      var $ct = $(template);
      $(this).replaceWith($ct);
      $ct.find('.editor-code').append(this);
    });
  };
})(jQuery);

$('.markdown-editor-textarea').markdownEditor();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="markdown-editor-textarea"></textarea>