Question

我正在动态生成一个包含HTML表单元素代码的字符串。然后，我想将此元素设置为现有节点的子元素。以下是我的代码。

$('#parentNode')[0].append(render(content))

其输出如下-您可以看到附加的双引号

<html>
  <div id='MatchMakingResults'>
    "<form>Dynamic child node</form>"
  </div>
</html>

我尝试了$('#parentNode')[0]append($.parseHTML(render(content));

但是随后它将字符串编码为一个对象。如何从添加的元素中删除这些双引号？

Answer 1

您要使用jQuery的.append()而不是本机DOM ParentNode.append()。 jQuery的方法可以将复杂的字符串转换为HTML。

为此，请从调用中删除[0]，因为它指向DOM节点，然后使用本机DOM附加。

var content = '<form>Dynamic child node</form>';

$('#MatchMakingResults').append(render(content));

function render(content) {
  return content;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MatchMakingResults"></div>

使用本机DOM附加，您可以看到它已添加为字符串：

var content = '<form>Dynamic child node</form>';

$('#MatchMakingResults')[0].append(render(content));

function render(content) {
  return content;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MatchMakingResults"></div>

Answer 2

除了来自@OriDrori的答案（这应该消除您的困惑）之外，您还可以只设置innerHTML属性，这样就不必解析字符串（这将使更多感觉是否要抛弃jquery并仅使用普通js）。例如：

const childNode = '<form>Dynamic child node</form>';
$('#parentNode')[0].innerHTML = childNode;

<div id="parentNode"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

将字符串格式的html元素附加到元素后，在元素周围添加双引号

2 个答案: