Question

有没有办法在将其添加到DOM之前“预先构建”一段HTML？

例如：

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

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

Answer 1

在处理更复杂的节点（尤其是嵌套的节点）时，在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);

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

Answer 2

非常确切地说你是如何做到的

这个的一些延伸...

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

然后最后

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

Answer 3

旧线程但我在搜索同样的时候遇到了它。

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

memtag现在是内存中的html标记，可以根据需要插入到DOM中。如果您使用img标记执行此类操作，则可以将图像“预加载”到缓存中以供日后使用。

Answer 4

当然，只需将它们构建为字符串：

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

Answer 5

有一个插件：

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

Answer 6

 for /F "tokens=*" %%A in (%FILEPATH%output.txt) do (
        setlocal EnableDelayedExpansion
        echo %%A
        SET /p name=%%A
        echo name:%name%
        FOR /F "tokens=2 delims=\" %%F IN ('wmic /NODE:"%name%" computersystem get UserName') DO (
            SET username=%%F
        )
        echo %username%
        pause
        ENDLOCAL
    )

创造了：

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

Answer 7

你可以预建它，也可以附加事件，数据属性，内部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);

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

7 个答案: