Referencing an HTML Document as a String in Javascript-CodePudding

See full project on Github: https://github.com/sosophia10/TimeCapsule (see js/experience.js)

I am using JQuery to create "applications" for my website. My issue is that I can't find the proper syntax for pulling the text of an html document into a string, so that the "application" button opens a window with an html file inside.

        $('.openbuttonapp').dblclick(function () {
            var $objWindow = $('<div > Put me in, Coach! </div>');

This function already successfully uses a string to create a window with html elements. However, my current program lacks the ability to easily modify, style, and organize my components.

I figure the proper code will look something like:

        var entireDocumentHTMLAsAString = document.documentElement.innerHTML;

        $('.openbuttonapp').dblclick(function () {
            var $objWindow = $(entireDocumentHTMLAsAString);

However, this clearly didn't work out. All assistance is appreciated.

edit: My problem is that I need to succinctly reference whole html pages without writing for a string within the variable. Right now, the function works by creating a window with that html text string inside. Instead of a string, I want to place any html document.

CodePudding user response：

From what I believe you are looking for, there are many solutions. You can use the HTML 5 template tag for example.

I'm using the HTML 5 template tag to hold the HTML. Then using jquery to get the contents of that template. Then using jquery to modify elements within that template then for demonstration purposes, I'm appending it to a div.

$template = $("template#window").contents();

$template.find(".counter").text(10);

$(".testoutput").append($template)

.window {
  width: 500px;
  height: 200px;
  border: 2px solid #000;
  background: #f3f3f3;
  padding: 10px;
}

.window .counter {
  color: red;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<template id="window">
      <div >Window <span ></span><br>&nbsp;Welcome to my Time Capsule!<b>(2018-2022)</b><br><br>  <b>2018</b><br>&nbsp;  -Purple Lightsaber (After Effects)   <br><br><br>
    </div>
</template>

<div ></div>