是否可以在不使用 jquery 的追加的情况下添加整个 html 部分？答案

【问题标题】：Is it possible to add entire html sections without using append in jquery?是否可以在不使用 jquery 的追加的情况下添加整个 html 部分？
【发布时间】：2018-03-19 20:14:44
【问题描述】：

我有一个添加按钮，它像这样动态添加 html 部分，Jsfiddle

var scntDiv = $('.wrapper');
var i = $('div.row').length;
$(".add_member").click(function () {
  $('html goes here').appendTo(scntDiv);
})

添加没问题，但我被要求继续使 html 更大，我必须在不同的项目中使用它。因此，在 append 中添加 html 元素很糟糕，而且您必须将其设为一个衬里并用双引号代替单引号。

我使用了 knockoutJS 和 riotJS，两者都可以完美运行，但我不想添加另一个库只是为了添加部分而不编写 html。

有没有办法在 jquery 或 Js 中添加整个部分，就像 remove 方法一样简单？不用手动写html？

【问题讨论】：

如何在不将其内容写入某处的情况下附加 HTML？你可以做的是把它放在 HTML 页面的某个地方（隐藏），然后在你需要附加它时获取它的 .html() 内容（然后显示它）。
@Jeto，据我所知，如果您尝试添加无穷多个部分，这将不起作用，除非您有其他想法。我的页面中有用 html 编写的部分，问题是，如果我想附加它；我必须将其复制粘贴到附加功能中。老板来说这节加x，我要加两次，在append函数里面是线性的
$('your_section_selector').html().appendTo(...)和复制粘贴有什么区别？
@Jeto 有一点不同，但问题是我还必须在追加内添加一个 html 衬里，并且我必须用单引号替换双引号。请注意 jsfiddle 中的删除功能有多简单？我想要一个这么简单的添加功能。另外，我在多个项目中使用它，所以有时各个部分之间存在很大差异。许多图书馆都喜欢很容易淘汰，但我没有看到为此添加整个图书馆的意义。我有很大的部分。有时你会忘记哪个是起始 div，哪个是必须进入 append 的结束 div。
请参阅jsfiddle.net/tZPg4/18599，了解您可以执行的操作。如果你没问题，我会把它作为答案发布。

标签： javascript jquery html

【解决方案1】：

这是一个基于您的小提琴的可能解决方案，无需更改任何其他内容（此代码有些问题/笨拙，见下文）：

// Clone the first entry (since it's always here and without a remove button)
var entry = $('#p_scents p:first').clone();

// Find the input with ID p_scnt, change its name, empty its value
entry
  .find('#p_scnt')
  .attr('name', 'p_scnt_' + i)
  .val('');

// Append a remove button to it and append it to the wrapper div
entry
  .append('<a href="#" id="remScnt">Remove</a>')
  .appendTo(scntDiv);

虽然有些笔记在看你的小提琴：

您的输入都具有相同的 ID，p_scnt。这是无效的 HTML，即使它在这里“有效”。
.live() 已弃用。您应该在最近的包装器上使用.on。检查文档。
name 属性不必是动态的。您可以将其设为p_scnt[]，其值将作为数组发送。如果确实需要指定索引，请使用p_scnt[i]。

【讨论】：

@Lynob 查看我更新的答案，使用 .val('') 清空值。这是非常基本的 jQuery！

【解决方案2】：

你可以在 jquery 中使用包含：

<div id="include"></div>


    <script>
        $(function () {
            $("#include").load("include.html");
        });
    </script>

【讨论】：

所以添加按钮追加include.html?
不，它附加了 sn-p
并且 jquery 在该 div 中加载了 html。这样做的好处是您可以在任何您喜欢的地方包含该 html，并仅在需要时在一个地方更新文本。
include 被添加一次，就是这样，如果我有无穷多行，如何保持包括无穷多输入？一旦文件被包含，它就不会被包含两次，依此类推
是的，使用这一行代码添加了一次包含。如果需要，您可以将相同的 html 文件添加到另一个 div 中。您在 include.html 中添加的内容取决于您