Develop Reference

Javascript: Can I Use JS to Copy an HTML Element From One Page to Another?

New to JS. Couldn't find any good solutions for this after researching, and seems like it shouldn't be too complicated.
Say I have a page called page1.html with this code:
<div class="page1">
<div class="wrapper">
<p>Some text.</p>
</div>
</div>
Now, I have a second page, page2.html, with this code:
<div class="page2">
</div>
I want to make a copy of the div with class wrapper from page1.html, and insert it into page2.html, within the div with class page2.
Both pages share the same script.js file.
I tried something like this:
page1content = document.querySelector('.wrapper');
page2content = document.querySelector('.page2');
page2content.append(page1content);
However, I'm getting errors on page1.html because the js can't find the div with class page2, and I'm getting errors on page2.html because the js can't find the div with class wrapper.
I found a similar question here, and a couple comments suggest using localStorage.
I am unfamiliar with localStorage so I tried to do some research, and tried something like this:
On page1.html I inserted this script at the bottom:
<script>
var pageContent = document.querySelector(".page1").innerHTML;
sessionStorage.setItem("page1content", pageContent);
</script>
On page2.html I inserted this script at the bottom:
<script>
document.querySelector(".page2").innerHTML=sessionStorage.getItem("page1content");
</script>
It didn't work for me, but perhaps I used it incorrectly.
I also tried to use cloneNode(), but again, wasn't sure how to transplant the clone of the element onto a new page, only onto the same page I'm cloning from.
Is there another way to accomplish what I'm trying to do?
Obviously this is a very basic example; my actual code will be pumping in much more content from page 1 to page 2, but I just want to get the concept working at least.

The code I had in my example in the description was almost correct, I just had to change sessionStorage to localStorage and it worked.

Is there a way to add alt text to an img tag using jquery?

There is an img tag being placed on a hidden portion of my wordpress site through some java script. Everytime I run a scan on my site looking for accessibility errors, this pulls up on every page of every site. I was wondering if there is a way to add an alt tag to it saying "this is empty" or anything really, since it's impossible to reach or see anyway.
I have tried looking at other alternatives, but I haven't had any luck so far, so any help would be greatly appreciated. The good thing is it seems to have a class name attached so hopefully that helps.
<div class="className">
<img>
<div>
</div>
</div

This is all you need:
$('img').attr('alt', 'Whatever you want');
or if you need it based on the class name in your example:
$('.className > img').attr('alt', 'Whatever you want');

Yes, you can always add attribute to an image using jquery, do it like this
$('img').attr('alt', 'This is very nice image');
If your image have a class than you can use
$('.class_name').attr('alt', 'This is very nice image');
If your image have a ID than you can use
$('#id_name').attr('alt', 'This is very nice image');

With this script you can set a default alt tag for all images that have a falsy alt tag (no alt tag, empty string, etc).
Important to note is that alt tags have a reason. People who use a text oriented browser (like blind people) use those alt tag so they at least know what kind of image there is. It is also used by some browsers when an image can't be loaded. So make sure all images without an alt tag (in your jQuery selection) are always hidden if you want a default alt tag otherwise it could be annoying.
$('img').filter(function() {
return !this.alt;
}).attr('alt', 'this is empty');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="className">
<img src="https://dummyimage.com/50x50/000/fff.png&text=test">
<img alt="" src="https://dummyimage.com/50x50/000/fff.png&text=test2">
<img alt="has alt" src="https://dummyimage.com/50x50/000/fff.png&text=test3">
</div>

I want to include a certain div from another url into my site

I have this
<div>
<object type="text/html" data="https://www.urlIWantTheDivFrom.com"
width="800px" height="600px">
</object>
/div>
However this gives me the whole webpage. I want to copy a certain div. I also tried some js. However I cannot find out how to copy the exact div as well
document.getElementById("div").innerHTML='<object type="text/html" data="https://www.urlIWantTheDivFrom.com" ></object>';

Embedding another webpage content is not allowed by default, but here is a thing which you may try using jQuery ajax:
$.get('https://www.urlIWantTheDivFrom.com', function(pageText){
// Appends to your div
$('#myDiv').append(
$(pageText) // parses returned html
.find('#externalDiv') // gets it div
);
})
But remember that online content publisher still has rights over his content, also remember that some tags link may be broken after importing.

How to automate selecting certain codes in an html?

Hi I have a question about automating selecting certain content in an HTML. So if we save an webpage as html only, then we'll get HTML codes along with other stylesheets and javascript codes. However, I only want to extract the HTML codes between <div class='post-content' itemprop='articleBody'>and</div> and then create a new HTML file that has the extracted HTML codes. Is there a possible way to do it? Example codes are down below:
<html>
<script src='.....'>
</script>
<style>
...
</style>
<div class='header-outer'>
<div class='header-title'>
<div class='post-content' itemprop='articleBody'>
<p>content we want</p>
</div>
</div></div>
<div class='footer'>
</div>
</html>
While I'm typing, I'm thinking about javascript, which seems to be able to manipulate HTML DOM elements..Is Ruby able to do that? Can I generate a new clean html that only contains content between <div class='post-content' itemprop='articleBody'>and</div> by using javascript or Ruby? However, as for how to write the actual code, I don't have a clue.
So anybody has any idea about it? Thank you so much!

I'm not quite sure what you're asking, but I'll take a crack at it.
Can Ruby modify the DOM on a webpage?
Short answer, no. Browsers don't know how to run Ruby. They do know how to run javascript, so that's what usually used for real-time DOM manipulation.
Can I generate a new clean html
Yes? At the end of the day, HTML is just a specifically formatted string. If you want to download the source from that page and find everything in the <div class='post-content' itemprop='articleBody'> tag, there are a couple of ways to go about that. The best is probably the nokogiri gem, which is a ruby HTML parser. You'll be able to feed it a string (from a file or otherwise) that represents the old page and strip out what you want. Doing that would look something like this:
require 'nokogiri'
page = Nokogiri::HTML(open("https://googleblog.blogspot.com"))
# finds the first child of the <div class="post-content"> element
text = page.css('.post-content')[0].text
I believe that gives you the text you're looking for. More detailed nokogiri instructions can be found here.

You want to use a regular expression. For example:
//The "m" means multi-line
var regEx = /<div class='post-content' itemprop='articleBody'>([\s\S]*?)<\/div>/m;
//The content (you'll put the javascript at the bottom
var bodyCode = document.body.innerHTML;
var match = bodyCode.match( regEx );
//Prints to the console
console.dir( match );
You can see this in action here: https://regex101.com/r/kJ5kW6/1

JQuery Rewrite HTML to Text

I have a 'preview' written in JQuery, which when I write in a textarea, it is written in HTML so that I can see what the output will look like before submitting a post.
One problem though, is that while the main behaviour I want is for the preview to be written in HTML (so that i can see images in real-time), I need to configure it so any text written in the textarea, within <'code'> tags, should be written as text, instead of HTML.
Can this be done?
Thanks in advance guys!
To give an example:
This is text, displayed as text. The following image is nice: <img src="" />
Below is the code to display this image:
<code><img src="" /></code>

Once you create the preview, you could just run this to replace the HTML inside of the code tags with text, like this:
$("#preview code").each(function() { $(this).text($(this).html()); });