We Keep Coding

Manipulate multiples HTML files with javascript

Is it possible to manipulate more than one HTML file in the same script?
For example, i have a <div id="div1"> on my index.html, and <div id="div2"> in another HTML file inside of another folder.
What i trying to do is get the content of the second div and replace to my "div1", but the "traditional way" doesnt work:
function replaceDiv(){
let div1 = document.querySelector('#div1')
let div2 = document.querySelector('#div2')
div1.innerHTML = div2
}
I'm new to programming, sorry if this is a dumb/obvious question haha
ps: both files have the link for the same script.
ps²: i know that i can manually write the string with innerHTML, but i wanna know if it's possible to do this

Why this doesn't work
The document object in JavaScript is representative of the currently rendered page's content, it can only exist when the page that loads this script is actively being rendered.
A web browser can only render one HTML file at a time (e.g. either index.html or other.html). Say #div1 is in index.html and #div2 is in other.html; the script can only see that one of these div elements exists since the document is scoped to the current page.
This is the same reason that you can reuse ids across multiple HTML files on the same website with no unexpected behavior.
Alternate Solution
Store this data (InnerHTML/the snippet needs to be shared) in the script itself since that can be requested on each page individually.

Insert html pages into wordpress

I have an html site with a page of info for each county in the US. I want to convert this into a new wordpress site. I can do this one by one but my issue comes when I have mass changes to affiliate code or common text. I would have to got to each page and manually change it. but with over 3000 pages it would be way to time consuming. I dont want to use Iframes but would like to know if there is a way to call the html pages into the wordpress page that makes sense seo wise.
I am open to creating a page for each county or have one page with text or buttons on it with each county listed and when clicked will insert the info below. I know alot about static html coding but am new to php.

If you dont want Iframes, I think there only remain two options. I don't know if they will work in WordPress though.
1. PHP Include
With the very simple PHP include() statement, you can include the old html files in your new website. If you have a HTML-file for example, name your file yourname.php and add this in the position you want your old page to appear:
<?php include(path_to_old_page/name.html); ?>
This will include the full old page, but the file needs to be on the same server.
2. AJAX
With JavaScript you can perform XHTTP-requests to load files from the server. This is easiest when using jQuery. Here you can use the $(selector).load(path_to_old_page/name.html) statement. This will load the file in the HTML elements to which the selector applies.
(The selector works the same as CSS selectors, see the w3schools page for more)
This will also include the full old page, when it is on the same server

You can have your static pages in WordPress as well. Like if you want to create a new county named "example" you can create new WordPress page named "example" by entering title " example" .... now come to content. Just copy page content (only "example" county related html code from your static website) and place that code inside newly created WordPress "example" page. Make sure you add this html content inside 'text' tab in editor. Your page will be created with all your existing data ... now you can view this page and can use this page's URL where ever you want.

Access HTML Code of another document of same server

I was working on reading a source of a html page (on the same site not cross domain) and use the div content to be shown on another page.
I want to access the HTML content of source.html without actually loading the file.
It is important for me to use HTML DOM only. I don't prefer to load the complete html source on a String var and parse it using REGEX or XML.
One of the approaches is to use frames and put the source html file on a frame and setting the src
parent.window.document.getElementById('sourceFrame').src = "htmlfiles/source.html";
this will load the source on a frame, allow to collect the div content by using
divHTML = parent.window.frames["sourceFrame"].document.getElementById("targetClassname").innerHTML
and show it on the target page using
document.getElementById("targetClassname").innerHTML = divHTML
This works fine but, it will load/show the HTML file. 0% width frame cannot be a solution as it WILL load the html document, its not visible that's it.
So, its about accessing the HTML content of source.html without actually loading the file, Any thoughts?

you can use an ajax request to get it, and then do with it what you want
$.ajax("htmlfiles/source.html", {
success: function(sourceFile){
// do something with the html file (sourceFile)
}
});

javascript will not load unless page is refreshed

I am working on a website that was started off by someone else. That person built the whole thing in one 1000-line html file, and links to different 'pages' just reference other sections in the main html file. So my task is to break the page apart into seperate html pages. Unfortunately, now the seperate pages do not load the javascript unless the page is refreshed.
Is there a standard way to fix this problem without forcing the user to manually refresh the page?

If you break that one big page into several smaller pages, make sure you include the JavaScript (and CSS) in the new pages. The most efficient way to do this is to have the JavaScript in an external JavaScript file, and bring that file into the new pages by putting the script tag inside the new pages' head tags like so:
<head>
<script src="path/to/javascript/app_name.js"></script>
</head>
When the user clicks on a hyperlink to see one of the new pages, when the browser receives the response from the server, it will parse the response and execute the JavaScript.

If I understand your problem correctly, I would wrap whatever "detailsScreen.js" does into a function and call it after you changed the page content.

is there a tool to capture all DOM webpage elements generated by browser-side javascript as html, for a full page html archive?

if a whole bunch of elements gets generated in my browser by javascript (using JSON data or just out of thin air) I am not able to fully archive such a page by saving its source. I already tried saving it as .mht file in IE, but that does not work - IE does not save the dynamically generated elements either.
An example of such a page is here http://www.amazon.com/gp/bestsellers/wireless/ref=zg_bs_nav - notice that "price" and "X new" elements do not exist in the source html but rather are dynamically generated.
If I wanted to parse this, I could work directly with the DOM by various means, yadda-yadda. But if I want to automagically save the page as html document such that it could be rendered with all the dynamically generated elements nicely rendered even while javascript is turned off, so far I am SOL.
Any suggestions?

In Firefox there's the Web Developer extension: https://addons.mozilla.org/en-US/firefox/addon/web-developer/
Once installed you can use View Source -> View Generated Source to access the JavaScript-modified HTML.