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

Question

I have to pass HTML around in as a string (as I'm using postmessage for communication). To apply modifications to the html, I'm doing:

function foo(my_string) {
  var temp, element_list;

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

My problem is that my_string can be anything and in case I'm passing a string with table rows and cells like this:

  '<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>'

appending this to a <div> removes the table rows and cells and I'm left with links only. Something like this:

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

Question:
Is there a generic element, which accepts any type of child elements and does not modify whatever it's passed via innerHTML?

Thanks!

Edit :
The method is used to translate html snippets. When I'm updating a table, it will only pass the generated table rows vs receiving the whole table on the initial page rendering.

Answer 1

There isn't such an element. <tr> is a very good example of this. According to W3C standards, the "Permitted parent elements" for <tr> are "A <table> , <thead> , <tbody> or <tfoot> element."

If you must have these strings coming in as they are, your best bet is to perform some sort of detection as to the type of element(s) you are inserting, and wrap them in the appropriate HTML if required.

For example: ( 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>";
    }
  }

});

Edit: Note that the technique used here to detect the tags used in your HTML can have problems if your HTML contains content that cannot be part of the same parent. For example, the following code would fail:

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

This is because of how jQuery internally builds its selectors. Since you can't have a div tag as a sibling to a tr , effectively the div element gets dropped. Here's a CodePen demonstrating this , but from the sound of things, this wouldn't be an issue for the OP's needs. If it is, you could use some alternative method of detecting the tags such as Regular Expressions.

Answer 2

_{If you append the mal-formatted HTML data (as you've noticed) with missing tags you're at the Browser DOM parser mercy removing every single one till a conformable HTML is returned.}

If your main concern ( project-wise ) is just about table HTML content than you could treat the string as an XML data structure and get the needed wrapping tag and act accordingly:

jsBin demo

function sanitizeHTML( string ) {

  // Treat friendly a HTMLString as XML structure:
  var par = new DOMParser();
  var doc = par.parseFromString(string, 'text/xml');
  var chd = doc.firstChild;
  var tag = chd.nodeName.toUpperCase(); // Get the tag
  var ele;

  function wrapWith(parent, childEl){ // Wrap a node into a parent
    var p = document.createElement(parent);
    p.appendChild(childEl);
    return p;                         // And return that parent element.
  }

  if(/^(THEAD|TBODY|TR)$/.test(tag)){ // If THEAD or TBODY or TR
    ele = wrapWith("table", chd);     // just wrap in TABLE.
  }else if(/^(TD|TH)$/.test(tag)){    // Else if TD or TH
    ele = wrapWith("tr", chd);        // wrap first in TR
    ele = wrapWith("table", ele);     // and than in TABLE.
  }else{
    // All fine. Do we need something here?
  }

  return ele || chd; // Returns a HTMLElement
}

// This will return the final HTMLElement:
// var myEl = sanitizeHTML( str ); 

// Let's see in console:
console.log( sanitizeHTML( str ).outerHTML ); 

For simplicity sake the above code will consider strings with only one children.
To extend it - loop all the children of the doc object.

Answer 3

See this jsfiddle: http://jsfiddle.net/Grezzo/x1qxjx5y/

With <tr> s in <table> s they are ok.

It's because you are putting a <tr> in a <div> which isn't valid.

Putting unsanitized content in the page like this is a real security risk

Update: I updated the jsfiddle to include two <div> s that were not modified by javascript and you can see that the <tr> s are stripped if they are not in a <table> parent: http://jsfiddle.net/Grezzo/x1qxjx5y/1/