jQuery添加DOM元素

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery添加DOM元素相关的知识,希望对你有一定的参考价值。

这可能是一个简单的答案,但我正在尝试将一个dom创建的元素(即document.createElement(...))添加到jQuery Selector。

jQuery有很多用于添加html的功能

  • html的(htmlString)
  • .append(htmlString)
  • .prepend(htmlString)

但我想要做的是添加一个dom OBJECT

var myFancyDiv = document.createElement("div");
myFancyDiv.setAttribute("id", "FancyDiv");

// This is the theoretical function im looking for.
$("#SomeOtherDiv").htmlDom(myFancyDiv); 
答案

试试这个:

$("#SomeOtherDiv").append($(myFancyDiv)); 

在$(...)中包装DOM元素,我希望你可以使用任何带有jQuery元素集合的jQuery DOM操作函数来添加它。

另一答案

这应该做到!

  $("#SomeOtherDiv").append('<div id="FancyDiv"></div>')); 
另一答案

你可以通过简单地删除jQuery来简化和加快操作:

document.getElementById("SomeOtherDiv").appendChild(fancyDiv);
另一答案

这将适用于jQuery 1.4

$("<div/>",{
    id: 'FancyDiv'
}).appendTo("#SomeOtherDiv");

http://api.jquery.com/jQuery/#jQuery2

另一答案

你可以这样试试:

$("<div/>", {

  // PROPERTIES HERE

  text: "Click me",

  id: "example",

  "class": "myDiv",      // ('class' is still better in quotes)

  css: {           
     color: "red",
     fontSize: "3em",
     cursor: "pointer"
  },

  on: {
    mouseenter: function() {
      console.log("PLEASE... "+ $(this).text());
    },
    click: function() {
      console.log("Hy! My ID is: "+ this.id);
    }
  },

  append: "<i>!!</i>",

  appendTo: "body"      // Finally, append to any selector

}); 

以上是关于jQuery添加DOM元素的主要内容,如果未能解决你的问题,请参考以下文章

从 DOM 中读取 HTML 片段并向其中添加自定义数据

实用代码片段将json数据绑定到html元素 (转)

jquery获取不到动态加载的dom元素是一种啥样的体验

jQuery 如何先创建再修改后添加DOM元素

react怎么通过函数控制渲染dom

jQuery学习手册