使用JavaScript（class.js）动态加载HTML

Question

我正在构建具有一些HTML组件的应用程序。

用例：

我正在尝试实现类似于here的功能。我想在单击菜单时调用HTML组件，并应用某些操作，例如拖动并调整大小等。

研究：

[我被建议采用面向对象的方法来构建应用程序，因此在浏览Google时遇到了class.js以实现JavaScript继承。

我完成了最初的教程，但是我不确定最初如何以及在哪里存储可以容纳HTML组件结构的HTML？

在参考应用程序中，他们使用了ribs.js和require.js，但是学习这些的时间有点短。

到目前为止，我的工作：

我尝试过的是创建文件components.js并为这样的组件创建外部HTML结构：

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>';

这是一个存储在JavaScript变量中的文本框，我想在用户单击菜单时添加它。但是如何使用class.js的继承模式实现呢？

我创建了一个画布页面，并显示了组件菜单。现在，我停留在获取html内容并将其显示在画布上的这一部分。

Answer 1

我看不到您要问的与继承有关。

有几种简单的方法可以使用JavaScript在网页上放置内容。

例如，如果您的页面上<div id='target'></div>处有以下内容，则可以这样写：

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;

为了获得最佳结果，我建议学习使用jQuery之类的库。这些工具旨在使操作页面HTML更加容易。