Question

I am working on building an application which has a few HTML components.

Use Case:

I am trying to achieve something similar what is present here. I want to call the HTML components on click of a menu and apply some actions like drag and resize, etc.

Research:

I was advised to take an object-oriented approach for building the application and hence while going through Google came across class.js for JavaScript inheritance.

I went through the initial tutorials, but I am not sure how and where can I store the HTML initially that will hold the structure for the HTML components?

In the reference application they have used backbone.js and require.js, but I am a bit short on time to learn these.

My Work So Far:

What I have tried is creating a file components.js and creating the outer HTML structure for a component like this:

var textBox = '<div class="structure-textBox">
               <div class="editable">
                <p><span style="font-size:20px;"><span style="font-family: arial,helvetica,sans-serif;"><strong>Text Box</strong></span></span></p>
                <ol>
      <li><span style="font-size:14px;">Double Click on the <strong>Text Box</strong> to Edit Text.</span></li>
      <li><span style="font-size:14px;">For easy use of the text editor click on the "i" (to the left of the x close) and watch a 30 sec video tutorial.</span></li>
    </ol>
    <p><span style="font-size:14px;"><span style="color:#7cba0c;">Enjoy web designing with GoBiggi.</span></span></p>
    <p><span style="font-size:14px;">Click on the <a href="#."><strong><u>Design Assistance</u></strong></a> link for further help.</span></p>
  </div>
</div>';

This is a text box stored in a JavaScript variable that I want to add when user clicks on a menu. But how can it be achieved using class.js’s inheritance pattern?

I have a canvas page created and menus for the components. Now I am stuck at this part of getting the html content and displaying it on the canvas.

Answer 1

I don’t see that what you’re asking has anything to do with inheritance.

There are several simple ways to put something on your web page using JavaScript.

For instance, if you have the following on your page somewhere <div id='target'></div>, you could write this:

var textBox = '<div class="structure-textBox">
               <div class="editable">
                <p><span style="font-size:20px;"><span style="font-family: arial,helvetica,sans-serif;"><strong>Text Box</strong></span></span></p>
                <ol>
      <li><span style="font-size:14px;">Double Click on the <strong>Text Box</strong> to Edit Text.</span></li>
      <li><span style="font-size:14px;">For easy use of the text editor click on the "i" (to the left of the x close) and watch a 30 sec video tutorial.</span></li>
    </ol>
    <p><span style="font-size:14px;"><span style="color:#7cba0c;">Enjoy web designing with GoBiggi.</span></span></p>
    <p><span style="font-size:14px;">Click on the <a href="#."><strong><u>Design Assistance</u></strong></a> link for further help.</span></p>
  </div>
    </div>';
document.getElementById('target').innerHTML = textBox;

For best results, I would suggest learning to use a library like jQuery. These tools are designed to make it easier to manipulate the HTML of the page, among other things.