javascript - 使用 jquery 构造 DOM 元素-6ren

javascript - 使用 jquery 构造 DOM 元素

转载作者：行者123 更新时间：2023-12-03 06:45:42

26

4

是否可以使用 jquery 通过构造函数创建 DOM 元素？

我正在尝试对名为 h5p 的插件进行逆向工程，如果您向下滚动到“javascript”部分，您将看到以下步骤:

对象命名空间的声明(我假设不会污染全局命名空间
创建实际 DOM 元素的构造函数
构建 DOM 元素的辅助函数

我知道这个特定的代码依赖于框架，但是它是否可以仅在单个 js 文件中复制？

var H5P = H5P || {};

H5P.GreetingCard = (function ($) {
  /**
   * Constructor function.
   */
  function C(options, id) {
    // Extend defaults with provided options
    this.options = $.extend(true, {}, {
      greeting: 'Hello world!',
      image: null
    }, options);
    // Keep provided id.
    this.id = id;
  };

  /**
   * Attach function called by H5P framework to insert H5P content into
   * page
   *
   * @param {jQuery} $container
   */
  C.prototype.attach = function ($container) {
    // Set class on container to identify it as a greeting card
    // container.  Allows for styling later.
    $container.addClass("h5p-greetingcard");
    // Add image if provided.
    if (this.options.image && this.options.image.path) {
      $container.append('<img class="greeting-image" src="' + H5P.getPath(this.options.image.path, this.id) + '">');
    }
    // Add greeting text.
    $container.append('<div class="greeting-text">' + this.options.greeting + '</div>');
  };

  return C;
})(H5P.jQuery);

这就是我的想象(警告:前面有粗略的伪代码!):

// quick and dirty h5p prototyping
<!DOCTYPE html>
<html>
<head>
  <script>import jquery here<script>
  $(document).ready(function(){

    // constructor for dom element

    // secondary helpers for dom element

    // initialize the element and append it to dom


  });
  </script>

</head>
<body>
  <h2> h5p prototyping</h2>
</body>

最佳答案

如果我理解正确的话，你可以通过这种方式使用 jQuery 创建 DOM 元素:

$(document).ready(function() {
  var newDOM = $('<div/>', {
    class: 'new-dom',
    html: $('<span/>', {
      text: 'NEW DOM!!'
    }),
    onClick: 'alert("Works EVEN JS");'
  });

  $('body').append(newDOM);
});

.new-dom {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<小时/>

只需将 DOM 元素所需的属性添加到构造函数对象的第二个参数 $('<nodeName/>', {settingsObject}) .

关于javascript - 使用 jquery 构造 DOM 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37744336/

26

4

0

文章推荐： javascript - angular2 - jQuery 将像素添加到顶部位置

文章推荐： javascript - jQuery延迟()函数不起作用

文章推荐： javascript - 在加载和调整大小时调用 jsRender 方法

方案说明(构造)
谁能解释一下原因: (define a (lambda() (cons a #f))) (car (a)) ==> procedure ((car (a))) ==> (procedure . #f)
Python "here, . . . where"构造
这是 PyBrain 网站的摘录。我了解大部分正在发生的事情，但是一行让我完全难住了。我以前从未在 python 代码中看到过这样的东西。这是整个循环，对于上下文: for c in [0,
groovy - 构造/销毁自定义Gradle任务
我是gradle / groovy的新手。我想创建将做一些事情的自定义任务。我的第一个问题是任务完成时该如何做？我可以覆盖doFirst / doLast闭包吗？也许我可以重写某些在开始和结束时都会执
c# 构造
我刚刚开始评估 MS 企业库。他们使用以下指令来获取实例: var customerDb = EnterpriseLibraryContainer.Current.GetInstance("C
ansible if else 构造
这是我的 if else Ansible 逻辑.. - name: Check certs exist stat: path=/etc/letsencrypt/live/{{ rootDomain
Python 构造 - 解析可变数量的可变长度记录
我正在使用construct 2.8 对一些失传已久的 Pascal 程序创建的一些文件的 header 进行逆向工程。 header 由许多不同的记录组成，其中一些是可选的，我不确定顺序是否固定。
构造 char 指针数组
我在将 getchar() 的输入放入 char *arr[] 数组时遇到问题。我这样做的原因是因为输入数据(将是一个带有命令行参数的文件)将存储在一个 char 指针数组中以传递给 execvp 函
c# - 构造/制作通用类型并将类型约束转换为结构作为基础类型的约束
通常我们不能约束类型参数 T派生自密封类型(例如 struct 类型)。这将毫无意义，因为只有一种类型适合，因此不需要泛型。所以约束如下: where T : string 或: where T :
Java - REGEX 构造
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 9 年前。 Improve th
C++构造、解构和指向类对象的机制
#include using namespace std; class A { private: int m_i; friend int main(int argc, char cons
javascript - 如何在javascript中使用 "with"构造？
这个问题在这里已经有了答案: Are there legitimate uses for JavaScript's "with" statement? (33 个答案) 关闭 9 年前。我有这个代
Bash 构造 $(< 文件)
在this answer我看到了下一个 Bash 结构。 yes "$(< file.txt)" 什么意思 "$(< file.txt)" ? 我明白了命令替换 - $(command)用命令的结
c++ - If Else 构造
if (a == 1) //do something else if (a == 2) //do something else if (a == 3) //do somethi
c# - ListViewItem 构造
关于构造的快速简单的问题。我有以下用于将项目添加到 ListView 的代码。 ListViewItem item = new ListViewItem(); item.Text = file; i
具有给定内存的c++ vector 构造
我想使用 std::vector 来控制给定的内存。首先，我很确定这不是好的做法，但好奇心占了上风，无论如何我都想知道如何做到这一点。我遇到的问题是这样的方法: vector getRow(unsi
连接字符串中的 Javascript 构造
下面显示了一段简单的javascript: var mystring = ("random","ignored","text","h") + ("ello world") 这个字符串会生成 hello
java - 新对象 { } 构造
在 Java 中，创建对象的标准方法是使用 MyClass name = new MyClass(); 我也经常看到构造 new MyClass() { /*stuff goes in here*/
c++ - 有没有办法在编译时从 initializer_list 构造？
我正在编写 C++ ndarray 类。我需要动态大小和编译时大小已知的数组(分别分配自由存储和分配堆栈)。我想支持从嵌套的 std::initializer_list 进行初始化。动态大小的没问题
visual-studio-2008 - () => 构造
我正在将一个项目从 Visual Studio 2005 转换为 Visual Studio 2008，并提出了上述结构。 using Castle.Core.Resource; using Cast
.net - 依赖注入(inject) - 构造
我想知道我在这里的想法是否正确，我主要针对接口(interface)进行编程，所以我想知道下面的类是否应该通过 DI 注入(inject)，或者我应该自己实例化一个类... 注意:这些服务保存在我的核

首页

博学

6Ren·AI

商城

javascript - 使用 jquery 构造 DOM 元素