我可以使用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>'

将此附加到a <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>就是一个非常好的例子.根据W3C标准,"允许的父元素"为<tr>是"A ,,<table> 或元件".<thead><tbody><tfoot>

如果您必须按原样输入这些字符串,最好的办法是对要插入的元素类型执行某种检测,并在需要时将它们包装在适当的HTML中.

例如:( 以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标记作为s的兄弟tr,因此有效地div删除了该元素.这是一个CodePen展示了这一点,但从事物的声音来看,这不是OP需求的问题.如果是,您可以使用一些替代方法来检测标记,例如正则表达式.