使用jquery和/或php从未渲染的代码动态创建元素

我想将需要时才呈现的html存储在一个标记中，该标记可以保存原始html代码，而无需在页面加载时呈现，或者将其存储在php或jquery变量中以供以后使用。然后，我希望能够在单击按钮时将html插入DOM并进行渲染

我曾尝试将其存储在xmp标记中，因为它可以存储带有<和>字符的html代码，而不使用字符代码，但当尝试将其插入DOM时，更新的源代码显示它已被复制，但无法在屏幕上呈现。还尝试将其存储在代码标签中，该标签在桌面浏览器上工作，但在mobile safari中不起作用。因为这是一款webapp，所以手机浏览器的兼容性很重要

---

有人知道这样做的好方法吗？

这取决于您想在哪里生成相关内容。如果在服务器端生成它更容易，您可以使用

css

隐藏这些部分（如

display:none

），只需删除css属性或使用javascript抓取节点并将它们放在其他位置，如下所示：

$('.target').html($('.hidden_node').html());

如果您想在js端生成内容，您可以将其构建为一个长字符串，然后将其推入目标，或者您可以使用如下方法：

$（''）.attr({
课程：“测试”
}).附于（“主体”）；

或者您可以使用各种javascript模板解决方案之一，如或。

尝试使用类型为

text/plain

或

text/html

的标签：

<script type="text/plain" id="example">
  <div class="example">
    <h2>Hello</h2>
    <p>World</p>
  </div>
</script>

$(".button").click(function () {
  var html = $("#example").text();
  $("#destination").html(html);
});

你好
世界

$（“.button”）。单击（函数（）{
var html=$（“#示例”）.text（）；
$（“#目的地”）.html（html）；
});

我已经尝试了css选项，但我仍然希望动态创建它，而不仅仅是公开它以进一步提高性能。至于js解决方案，将其保存为我在另一篇文章中提到的一个长字符串，但可读性很差，将每一行都封装在“”中并后跟+符号只是。。。我不想。听起来使用一些模板解决方案可以帮助提高可读性，但是我不确定它是否会比只使用html更快，如果你不需要修改太多的话。浏览器在解析html方面相当出色，chrome的性能选项卡或dynatrace应该可以帮助您衡量它。桌面浏览器很好，safari和chrome等移动浏览器也可以正常工作，因为它们包含快速javascript引擎，但鉴于我正在创建一个混合应用，例如，iOS的本机浏览器不包括javscript nitro引擎，而且当页面上有大量表单输入时，性能会大大降低，这也是我需要找到解决方案的主要原因，因此我必须找到最快的js方法，仅在需要时创建元素。即使隐藏输入和整个表单也会降低性能，因为它们仍然在DOM中。我非常鄙视苹果。如果我没记错的话，

.innerHTML

是dom的

createElement

上的一个组件，而且在我的经验中，快速代码很少漂亮。只要找到一些方法来测量它，因为如果你不测量它，你就不能吹嘘它（-：

<script type="text/plain" id="example">
  <div class="example">
    <h2>Hello</h2>
    <p>World</p>
  </div>
</script>

$(".button").click(function () {
  var html = $("#example").text();
  $("#destination").html(html);
});