JQuery：在'内存'而不是DOM中构建HTML

有没有一种方法可以在将HTML添加到DOM之前“预先构建”一段HTML代码？JQuery：在'内存'而不是DOM中构建HTML

例如：

$mysnippet.append("<h1>hello</h1>"); 
$mysnippet.append("<h1>world</h1>"); 
$("destination").append($mysnippet);

其中$ mysnippet犯规DOM中的存在。我想动态地构建一些html块，然后在适当的时候将它们插入到页面中。

来源

2008-12-03 jdee

是非常确切你是怎么做到的

一些扩展的这个...

$('<div>').attr('id', 'yourid').addClass('yourclass').append().append()...

，最后

.appendTo($("#parentid"));

来源

2008-12-03 14:54:02 adam

我发现， .wrap（）不支持in-memory/out-of-dom元素。 – user982671 2013-04-17 16:32:55

当然，只是建立他们作为一个字符串：

$mysnippet = "<h1>hello</h1>"; 
$mysnippet = $mysnippet + "<h1>world</h1>"; 
$("destination").append($mysnippet);

来源

2008-12-03 14:54:09

由于文本是hacky（DOM不是一个字符串，它只是作为一个持久化），不可靠的（它增加了创建不平衡的东西的机会）和不必要的（我们有本地方法和JQuery来创建节点）来处理DOM。 – mikemaccana 2012-03-17 11:26:11

@mikemaccana阅读DOM创建代码是一个痛苦的屁股和DOM创建代码也比给它一个字符串慢。选择你的战斗。 – 2014-08-14 18:51:53

那里是这个插件：

http://plugins.jquery.com/project/appendText

来源

2008-12-03 14:57:04 GeekyMonkey

当与更复杂的节点（尤其是重嵌套的）处理，这是一个更好的办法来写HTML中的节点并设置其知名度隐藏。

然后，您可以使用JQuery的clone（）方法创建节点的副本并根据需要调整其内容。

E.g.与此HTML：

<div class="template-node" style="display:none;"> 
    <h2>Template Headline</h2> 
    <p class="summary">Summary goes here</p> 
    <a href="#" class="storylink">View full story</a> 
</div>

它的速度更快的和可以理解的事：

var $clone = $('.template-node').clone(); 
$clone.find('h2').text('My new headline'); 
$clone.find('p').text('My article summary'); 
$clone.find('a').attr('href','article_page.html'); 
$('#destination').append($clone);

，而不是在内存中创建整个节点如上所示。

来源

2009-07-07 10:14:34 fbuchinger

旧的线程，但我在搜索时遇到了它。

var memtag = $('<div />', { 
       'class' : 'yourclass', 
       'id'  : 'theId', 
       'data-aaa' : 'attributevalue', 
       html  : 'text between the div tags' 
});

memtag现在是一个内存中的html标记，可以插入到DOM中，如果你想要的话。如果您使用img标签做这样的事情，您可以将图像预加载到缓存中供以后使用。

来源

2012-12-19 12:48:04

var sample = 
    $('<div></div>') 
     .append(
      $('<div></div>') 
       .addClass('testing-attributes') 
       .text('testing')) 
     .html();

它创建：

<div class="testing-attributes">testing</div>

来源

2016-05-27 14:23:32

您可以预生成并还附上事件，以及数据属性，内部HTML，等等，等等

var eltProps = { 
    css: { 
     border: 1, 
     "background-color": "red", 
     padding: "5px" 
    }, 
    class: "bblock", 
    id: "bb_1", 
    html: "<span>jQuery</span>", 
    data: { 
     name: "normal-div", 
     role: "building-block" 
    }, 
    click: function() { 
     alert("I was clicked. My id is" + $(this).attr("id")); 
    } 
}; 

var elt = $("<div/>", eltProps); 

$("body").append(elt);

来源

2016-07-30 14:53:03

JQuery：在'内存'而不是DOM中构建HTML

回答

相关问题