Develop Reference

Why is the text in the footer tag appearing before I press a button that reveals it?

Why is my text in the footer element coming before I press a button? I have linked it so that the button reveals the text inside the footer. But the text was already there before I clicked the button, and another set of text from the footer appears when the button was clicked. How should I change my code?
function myFunction() {
var x = document.getElementById("Answer").innerHTML;
document.getElementById("A").innerHTML = x;
}
<h2>Amazing performance</h2>
<footer id="Answer">
<h1>
<p style="font-size:16px;font-family:verdana;color:Green">Yes</p>
<h1>
</footer>
<p>Should You buy it?</p>
<button onclick="myFunction()">Click to reveal</button>
<p id="A"></p>

The text is already present since your html code already has the footer element in it.
One way to do this to have the visibility element attached to your footer. Set it to "hidden".
When the button is clicked, you change visibility to "visible"
reference: https://www.w3schools.com/cssref/pr_class_visibility.php

because you are displaying the Yes text in the DOM with HTML. You need to make display:none in css to the element with id "Answer", and then change it to display:block with JS when the button is click.
<style>
#Answer{
display:none;
}
</style>
<h2>Amazing performance</h2>
<footer id="Answer">
<h1>
<p style="font-size:16px;font-family:verdana;color:Green">Yes</p>
<h1>
</footer>
<p>Should You buy it?</p>
<button onclick="myFunction()">Click to reveal</button>
<script>
function myFunction() {
var x = document.getElementById("Answer");
x.style.display = 'block';
}
</script>

How to Add Class to Child Element of Parent using Javascript

I'm attempting to add a class to a p tag using the parent tag. Unfortunately, it does not appear to be adding the class .answer to the p tag. This is the code I have so far:
HTML
<div class="x-acc-content">
<p>This is sample text.</p>
</div>
Javascript
function($) {
$(this).children('div.x-acc-content').getElementsByTagName('p') [0].addClass('answer');
};

You can use .children('p') to get all children inside your div and then use .addClass() to add class to p tags .
Demo Code :
$(".x-acc-content").children("p").addClass("answer")
//or
//$(".x-acc-content").find("p").addClass("answer")
//or only first p tag
//$(".x-acc-content").find("p:first").addClass("answer")
.answer {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="x-acc-content">
<p>This is sample text.</p>
<p>This is sample text.</p>
</div>

Try
$(".x-acc-content").find("p").addClass("answer");
or
$(".x-acc-content"). children("p").addClass("answer");
or
$(".x-acc-content p").addClass("answer");

Highlight Duplicate word on hover using javascript

I have the following html
<div class="my-div">
<p>
Hello from the moon
</p>
</div>
<div class="my-div">
<p>
Hello World
</p>
</div>
Is it possible using javascript that when I hover on the word 'Hello' in the first div, I highlight or even bold just the 'Hello' word in the second div..
Any help appreciated

To highlight a specific word you need to place it in <span> tag. For example:
<div class="my-div">
<p>
<span class="first-hello">Hello</span> from the moon
</p>
</div>
<div class="my-div">
<p>
<span class="second-hello">Hello</span> World
</p>
</div>
In JavaScript file, you can select your elements by using document.querySelector() function. And then add appropriate event listeners, in this case, mousemove that is fired when a mouse is moved while the cursor is inside the element, and mouseout that is fired when the cursor is moved outside of the element
const firstHello = document.querySelector(".first-hello");
const secondHello = document.querySelector(".second-hello");
firstHello.addEventListener("mousemove", () => {
secondHello.style.fontWeight = "bold";
});
firstHello.addEventListener("mouseout", () => {
secondHello.style.fontWeight = "normal";
});

I am using Lettering.js and Jquery to achieve this.
<script src="jquery-3.5.1.js"</script>
<script src="lettering.js"></script>
<script>
function btnClicked(){
//The words are now put into individual spans. See lettering js documentation
$(".lettr").lettering('words');
$("span").hover(function(e){
// set default background color to white
$("span").css("background-color", "white");
//Get the word at the current mouse hover
let word = e.target.innerHTML.trim();
//Keep a list of all spans in the html document
let listSpans = $("html").find("span");
//Loop through all the individual spans and see if the innerHTML matches the word. If so , highlight it.
for(let i=0;i<listSpans.length;i++){
let spanword= listSpans[i].innerHTML.trim();
if(spanword== word){
$(listSpans[i]).css("background-color", "yellow");
}
}
}, function (e) {
});
}
</script>
Here is my body
<body>
<div>
<p class="lettr"> Heloo i am </p>
<p class="lettr">Heloo me too</p>
</div>
<button onClick="btnClicked();">Click me</button>
</body>

how to refer a tag to fill data with javascript?

How can I refer a particular h4 tag which is present in a div, which in turn present in a div, which is also present in a div to fill data from an array?.

<div><div><div><h4 id="head"></h4></div></div></div>
<script>
document.getElementById("head").innerHTML="some value";
</script>

Please check this.
function changeText() {
//uncomment if want to use by tag id
//document.getElementById('my_tag').innerHTML = "This is a new Heading";
// if want to use by tag class name
document.getElementsByClassName('my_tag')[0].innerHTML = "This is a new Heading";
}
<div>
<div>
<div>
<h4 id="my_tag" class="my_tag">This is a Heading</h4>
<p>This is a paragraph.</p>
<button onclick="changeText();">Click Me</button>
</div>
</div>
</div>

How to remove the content from a "div" element using a button "onclick" function?

I have a div element that contains a number of images. When the user clicks a button, I want the contents of the div to be removed (not the div itself, I want to reuse the div to potentially add new content).
In my HTML, the div and button are defined as:
<body>
...
<div class="MyDiv"></div>
...
<button id="removeDiv" onclick="removeDivFunction()">remove Div Function</button>
...
</body>
How do I write a function that removes all elements from this div?

You have to call removeChild:
function removeDivFunction() {
MyDiv.parentNode.removeChild(MyDiv);
}

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>Remove div element</button>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});

David has already pointed you to an existing question/solution.
For reference consider reading: http://www.w3schools.com/js/js_htmldom_nodes.asp
Its always a good idea to assign id to the div.
Also if you are using jQuery you can delete element by $("#divid").remove() for reference see: https://api.jquery.com/remove/
I hope this helps.

function removeDivFunction() {
$(".MyDiv").remove();
}

<div class="MyDiv">I need to remove</div>
<button id="removeDiv" onclick="removeDivFunction()">remove Div Function</button>
function removeDivFunction() {
var element = document.getElementsByClassName("MyDiv")[0];
element.parentNode.removeChild(element);
}
DEMO

You can try
Html
<div id="some">Example</div>
<button onclick="myFunction()">Click me</button>
javascript
function myFunction() {
var child = document.getElementById("some");
child.parentNode.removeChild(child);
}
And if you want to erase content of DIV then use
child.innerHTML = "";