javascript - 我可以使用innerHTML 将所有可能的HTML 元素附加到哪个HTML 元素？

Question

我必须将 HTML 作为字符串传递(因为我使用 postmessage 进行通信)。要对 html 应用修改，我正在执行以下操作:

function foo(my_string) {
  var temp, element_list;

  temp = document.createElement("div")
  temp.innerHTML = my_string;
  element_list = temp.querySelectorAll(".foo");
  ...

我的问题是my_string可以是任何东西，如果我传递一个包含表格行和单元格的字符串，如下所示:

  '<tr>' +
    '<td>' +
      '<a href="#gadget._key=project_module%2F1&amp;gadget.view=view">' +
        'My Test Project 2014/12/16 14:24:48.930904 GMT' +
      '</a>' +
    '</td>' +
    '...' +
  '</tr>'

将此附加到 <div>删除表格行和单元格，我只剩下链接。像这样的事情:

      '<a href="#gadget._key=project_module%2F1&amp;gadget.view=view">' +
        'My Test Project 2014/12/16 14:24:48.930904 GMT' +
      '</a>' +

问题:
是否有一个通用元素，它接受任何类型的子元素并且不会修改通过innerHTML传递的任何内容？

谢谢!

编辑:
该方法用于翻译 html 片段。当我更新表格时，它只会传递生成的表格行，而不是在初始页面呈现时接收整个表格。

Answer 1

不存在这样的元素。 <tr>就是一个很好的例子。 According to W3C standards, the "Permitted parent elements" for <tr> are "A <table> , <thead> , <tbody> or <tfoot> element."

如果您必须按原样输入这些字符串，那么最好的选择是对要插入的元素的类型执行某种检测，并将它们包装在如果需要，适当的 HTML。

例如:( View as a CodePen )

HTML

<div id="container"></div>

JavaScript

var anyone = "<div>In a Div</div>";
var tableOnly = "<tr><td>In a..</td></tr>" +
    "<tr><td>...table</td></tr>";

$(function () {
  var $container = $("#container");
  appendContent(anyone);
  appendContent(tableOnly);

  function appendContent(html) {
    var $html = $(html),
        $parent = $(),
        lastParent = "";
    $html.each(function () {
      var parent = parentTag(this.tagName);

      if(parent !== lastParent)
      {
        $container.append($parent);
        $parent = $(parent);
      }
      $parent.append(this);
      lastParent = parent;
    });

    $container.append($parent);
  }

  function parentTag(tagName) {
    switch (tagName.toLowerCase()) {
      case "tr":
        return "<table></table>";
      default:
        return "<div></div>";
    }
  }

});

编辑:请注意，如果您的 HTML 包含不能属于同一父级的内容，则此处用于检测 HTML 中使用的标记的技术可能会出现问题。例如，以下代码将失败:

appendContent("<tr><td>Also in a table</td></tr><div>Also in a div</div>");

这是因为 jQuery 在内部构建其选择器的方式。因为你不能拥有 div标记为 tr 的同级，实际上是div元素被丢弃。 Here's a CodePen demonstrating this ，但从事情的声音来看，这对于 OP 的需求来说不是问题。如果是，您可以使用一些替代方法来检测标签，例如正则表达式。