Develop Reference

Referencing an HTML Document as a String in Javascript

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 class="window"> 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.

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 class="window">Window <span class="counter"></span><br> Welcome to my Time Capsule!<b>(2018-2022)</b><br><br> <b>2018</b><br> -Purple Lightsaber (After Effects) <br><br><br>
</div>
</template>
<div class="testoutput"></div>

Show the URL preview in the bottom left of the browser for a clickable div

I have made a div clickable using jquery. Is there a way to also tell the browser to display the target of the clickable div like it does for anchors? (example in the bottom left of the image below)
In answer to those suggesting using an anchor tag - That's not the question I asked. I want to avoid using anchor tags as that requires changing a lot of html, rather than a small amount of jquery. And even if changing the html to use anchors is the correct thing to do - it will still be useful to know if this is possible.
Edit it seems this is not easilly possible, but an alternative suggested by Pete, using jquery to wrap the div in an anchor works fine (better than I thought it would)

Just use a normal link and hide it:
a {
opacity: 0;
font-size: 100px;
}
div {
width: 100px;
height: 100px;
border: 1px solid red;
}
<div>
hidden link
</div>

Replacing string within page with jQuery/javascript

I'm trying to replace a string within a tag in my html page at specific position. I have to do it often and match exactly specific string. For example, if I have:
<style id="myStyle">
h1 {
background-color: red;
}
h2 {
background-color: red;
}
</style>
I have to replace h2 background-color but not h1. Do I have to rewrite every time text within style tag? Or there is some better solution that splitting, recombining the entire string and then replacing tag's content(could be very big).
JavaScript replace function is not good, it doesn't replace at specific position.

Using jQuery you can change the style of all the h1 elements currently in the DOM like so:
$('h1').css({
'background-color': 'red'
});
You cannot actually alter what is within the style tags. But you can alter the styles of elements on the page using javascript/jQuery. The above code illustrates this

You can do so with jQuery easily
$('h1').css("cssText",
"background-color: green; other-css-properties;" );
If you really want to be specific you could give an id or a class to whatever you want to change and do something like
$("#given-id").css(...) for ids and $(".given-class").css(...) for classes

Give the h2 an id of "h2" and then have whatever event you want that triggers the change execute the following line.
document.getElementsById("h2")[0].setAttribute("style","color: red; background-color: gray;");

How can we retrive style from css by selector without creating element?

Suppose we have 2 css files
First has
.x { background-color="red" }
second has
div { border=1 }
div:hover { border=2 }
How can we get style of by javascript without creating new element just to get its style?
And even if we need to create new element for get the style or not. How we can get it with and without hover ?
Are there any functionality like document.queryStyle({ type:"div",class:"x",hover:true }) or anything like this?

There is usually no problem with creating the element and removing the element right after, because the visitor will never see it.
Solution with jquery:
$div = $('<div class="border"></div>');
$('body').append($div);
var css = $div.css("border");
$div.remove();
HTML
<div class="content">
hello world
</div>
CSS
div.border {
border: 1px solid black;
}
JsFiddle example: http://jsfiddle.net/ypUKC/
If you really can't create the element, google for "Javascript CSS Parser".
By the way, your CSS Syntax is incorrect. It's "div { border: 1px; }", not "div { border = 1 }"

Thanks for you all's help. I have found a method I need for retrive style with event selector

Javascript - modify CSS on HTML tag?

The HTML tag on this page I'm working on is in a class that is giving it a top padding of 28px. I need this to go away temporarily when a button is clicked, but it doesn't appear that I can change the styling of the HTML tag itself.
Will I need to use position: relative; on the body tag or something similar? Is there really a way to assign CSS to the HTML tag that I don't know about?
# Comments:
Sorry, I'm in a bit of a rush here. It's something to the effect of this:
<html class='pad_my_top'>
<head>
<style type='text/css'>
.pad_my_top{
padding-top: 28px;
}
body{
background: #000000;
}
</style>
<script type='text/javascript'>
function its_gone(){
// Something here to remove padding.
alert("It's gone. Hurray!");
// Something to put it back.
}
</script>
</html>
<body>
<button onClick='its_gone()'>Click me to get rid of the top padding</button>
</body>
</html>
I really want it gone so I can print the page with Javascript, but I'd rather not use any 3rd party code because this is for a plugin for Wordpress and I don't want a billion dependencies. I only need to hide/re-display 3 divs and (re)change 2 styles.

Use this to remove the top padding:
document.documentElement.style.paddingTop = "0";
and this to set it back:
document.documentElement.style.paddingTop = "28px";

There's no reason to use getElementsByTagName and whatnot...just use document.documentElement. Also, it's better to use a class and toggle that instead of directly setting the style attribute. What if you change the 28px to 20px in your CSS? Then you have to change it somewhere else. Since you are sure you want the top-padding to be 0, then add a class that sets that. When done, remove that class. Like this:
<style type="text/css">
.no-top-padding {
padding: 0 !important;
}
</style>
document.documentElement.className += " no-top-padding";
And to "add" the padding back (by effectively removing the class):
var old_class = document.documentElement.className;
document.documentElement.className = old_class.replace(/(?:^|\s)no-top-padding(?!\S)/g, "");
Although it could be done a lot cleaner with the DOM API classList. The regex is just a safer way for making sure the className property is modified correctly to remove the "no-top-padding" class.