如何在不呈现HTML的情况下将dom元素放置在HTML中？

Question

I need to place html/javascript code in html page that I don't want to render/run at page load.

I want to get this content later with `innerHTML' and use it dynamical.

How can code be saved in html page so that browsers ignore it but it can be manipulated with Javascript dom interaction.

 <script norun="true" type="text/xml">
          <script type="text/javascript"></script>
          <div>html</div>
 </script>

Above code is not working, because closing tag of inner <script> tag closes the parent "text/xml" type script. Need corss-platform method to keep JS/HTML inside dormant and intact.

Answer 1

Future solution: HTML5 <template> . But it's not supported on IE

Safe solution: entity-escape or base64 encode and decode in javascript

Hacky: <svg style="display:none;"><![CDATA[ your inert content here ]]></svg> , since html5 itself does not allow cdata but an exception is made for foreign content, ie svg and mathml

Answer 2

When I do a similar thing (usually with view fragments for SPA-style pages) I generally go with the script tag approach similar to what you were doing. This is assuming I'm using Hogan.js but you can ignore those details for the example:

<script type="text/hogan-template" id="tweet-template">
  <div class="tweet">
    <div class="username">{{username}}</div>
    <div class="body">{{body}}</div>
    <div class="date-posted">{{posted}}</div>
  </div>
</script>

From here you can fetch it via JavaScript when you need it and the browser ignores it as HTML.

var tweetTemplateEl = document.querySelector("#tweet-template"),
    tweetTemplate = hogan.compile(tweetTemplateEl.innerHTML);

var tweetList = document.querySelector("#tweet-list"),
    tweetItem = document.createElement("li");

tweetItem.innerHTML = tweetTemplate.render(tweetData);
tweetList.appendChild(tweetItem);

For JavaScript, you could use something like a placeholder on the page. I'm not really sure the most semantic tag to use so I'll use div as it's generally a go to "default" tag. So, in place of where you'd place an include you could simply do:

<div class="script-placeholder" id="some_js_file_name" data-href="/js/some_js_file_name.js"></div>

This could be used in multiple ways but here's one option:

window.require = function(fileName) {
  var body = document.querySelector("body"),
      placeholder = document.querySelector(["#", fileName].join("")),
      src = placeholder.dataset.href,
      script = document.createElement("script");
  script.src = src;
  body.appendChild(script);
};

Which you can then add to whatever you'd like to initiate a require:

someElement.addEventListener("click", function(e) {
  require("some_js_file_name");
});

That might be something that allows you to achieve what you'd like to achieve.

NOTE: It's important to note that if you really want to go the dynamic load route you should probably invest in an established library to accomplish this like CommonJS if you'd like the style of requires like I've shown here. This handwritten sample is just that, it's a sample to give you an idea of what is going on.

Answer 3

Wrap the code in an HTML comment: <!-- ... -->

Browsers will not parse or render anything inside of the comment.

When you want to initiate rendering, uncomment the code. This can be done by wrapping the comment in an identifiable element, getting its innerHTML, stripping out the comment syntax, and resetting the innerHTML of the element to be the live uncommented markup.

http://jsfiddle.net/92du461p/2/

<button id="b">Show hidden content</button>
<div id="delay-render"><!-- <p>hide me</p> --></div>
<script>
  var r = document.getElementById('delay-render');
  var b = document.getElementById('b');
  b.addEventListener('click', function() {
    r.innerHTML = r.innerHTML.match(/^<!--(.*)-->$/)[1]
  });
</script>