How to add specfic elements to to HTML containers using DOM - javascript

I'm doing the Odin Project and am stuck on an exercise.
The requirement is that I have to add specific elements to a container in the HTML file but I can't get the following sections to show up at all when I run it:
a <div> with a black border and pink background color with the following elements inside of it:
another <h1> that says “I’m in a div”
a <p> that says “ME TOO!”
Hint for this one: after creating the <div> with createElement, append the <h1> and <p> to it before adding it to the container.
Here's my code https://codepen.io/mohd057/pen/KKQWdYV
const container = document.querySelector('#container');
const myP = document.createElement("p");
myP.style.color = "red";
myP.textContent = "Hey I'm red!";
const myH = document.createElement("h3")
myH.style.color = "blue";
myH.textContent = "I'm a blue h3!";
container.appendChild(myP);
container.appendChild(myH);
const myDiv = document.createElement("div");
myDiv.setAttribute('style', 'border: black; background: pink;');
const anotherH = document.createElement("h1");
anotherH.textContent = "I'm in a div";
const anotherP = document.createElement("p");
anotherP.textContent = "ME TOO!";
container.appendChild(myDiv);
Here's the link to the exercise https://www.theodinproject.com/lessons/foundations-dom-manipulation-and-events (struggling on questions 3, 1, and 2 are fine)
Would love to know where I'm going wrong.

What is missing:
border needs a border-style property to show
background's color property is called background-color otherwise you have to define it like this
You didn't append any element inside myDiv
const container = document.querySelector('#container');
const myP = document.createElement("p");
myP.style.color = "red";
myP.textContent = "Hey I'm red!";
const myH = document.createElement("h3")
myH.style.color = "blue";
myH.textContent = "I'm a blue h3!";
container.appendChild(myP);
container.appendChild(myH);
const myDiv = document.createElement("div");
myDiv.setAttribute('style', 'border: black solid; background-color: pink;');
const anotherH = document.createElement("h1");
anotherH.textContent = "I'm in a div";
const anotherP = document.createElement("p");
anotherP.textContent = "ME TOO!";
myDiv.appendChild(anotherH);
myDiv.appendChild(anotherP);
container.appendChild(myDiv);

Related

HTML child element hidden under Parent’s sibling. How to make it visible?

I’m running into an html display issue with my Browser Extension’s content script. On a particular grocery store page with multiple products arranged in a grid, I’m adding a banner with nutrition information to each product. The banner (div.hhtooltipwrapper.hhcaution) is to appear to the right of the product it pertains to. However, it is currently hidden behind the adjacent product image (the sister element to the banner’s parent element). How do I bring the banner to the top of all other elements (changing z-index didn’t work) and make it visible?
What it looks like now (div.hhtooltipwrapper.hhcaution highlighted after inspecting element); Here, the banner for apple cinnamon cheerios is hidden behind the Lucky Charms product info
What it should look like (from another grocery store page)
—- Could someone please help me understand how to make the banner visible?
Here’s some more detail:
My code for appending banner to document:
function create(msg){
// locate all elements that data-testid = ProductCardWrapper-_____sku_____
const productElement = document.querySelector('[data-item-id="' + msg.productInfo.id + '"]');
const productImage = productElement.getElementsByClassName("relative overflow-hidden")[0];
productImage.appendChild(constructOverlay(msg));
//productElement.style.max-width = 'none'; // Walmart display = 'block' so beyond set width, banner isn't visible
productElement.style.display = 'flex';
//ISSUE WITH display=block and margins don't include the badge size...};
Styles.css for banner:
.hhtooltip .hhtooltipwrapper {
visibility: hidden;
position: absolute;
display: flex;
flex-direction: column;
width: 260px;
background-color: white;
color: black;
border: 2px solid;
border-radius: 4px;
z-index: 10;
top: 0;
left: 105%;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);}
HTML for creating the banner:
function constructOverlay(msg) {
const wrapper = document.createElement('div');
const tooltip = document.createElement('div');
let pass = (msg.cautionIngredients.length === 0) ? " hhpass" : " hhcaution";
if(msg.forbiddenIngredients.length != 0){
pass = " hhfail";
}
if (pass === " hhpass") greens.push(msg.productInfo.id);
if (pass === " hhcaution") yellows.push(msg.productInfo.id);
tooltip.setAttribute('class', "hhtooltipwrapper" + pass);
wrapper.setAttribute('class', 'healthyhelperoverlay hhtooltip' + pass);
msg.sumNutrients.forEach(sumNutrient => {
const row = document.createElement('div');
row.setAttribute('class', 'nutrient_row');
const item = document.createElement('span');
item.className = "nutrient_item";
item.innerText = sumNutrient.value + " ";
const unit = document.createElement('span');
unit.className = "nutrient_item";
unit.innerText = sumNutrient.unit + sumNutrient.shorthand;
row.append(item, unit);
wrapper.append(row);
});
const header = document.createElement('h3');
header.classList.add("hhheader");
const nutrition = document.createElement('div');
nutrition.classList.add("hhnutrition");
const label = document.createElement('h4');
label.classList.add("hhtitle")
const nutrients = document.createElement('uL');
nutrients.classList.add("hhnutrients");
let name = msg.productInfo.name;
if (name == null)
name = msg.productInfo.description;
if (name == null)
name = "Missing Product Name";
header.innerText = toTitleCase(name);
label.innerText="Nutrition:"
const servingSize = document.createElement('div');
servingSize.classList.add("hhserving");
const row2 = document.createElement('li');
const label4 = document.createElement('p'); // before was 'div'
label4.innerText = "Serving Size:"
label4.classList.add("hhservinglabel");
const servingSizeVal = document.createElement('span');
servingSizeVal.classList.add("hhservingval");
servingSizeVal.innerText = msg.servingNumList + " " + msg.servingUnitList;
row2.append(label4, servingSizeVal);
servingSize.append(row2);
// serving size formatting
msg.nutrients.forEach(nutrient => {
const row = document.createElement('li');
const item = document.createElement('span');
item.innerText = toTitleCase(nutrient.name);
const unit = document.createElement('span');
unit.innerText = nutrient.value + " " + nutrient.unit;
row.append(item, unit);
nutrients.append(row);
});
const ingList = document.createElement('div');
ingList.classList.add("hhlist");
const label2 = document.createElement('h4');
label2.classList.add("hhtitle")
const ingredients = document.createElement('p');
ingredients.classList.add("hhingredients");
ingredients.innerHTML = msg.ingredientList;
label2.innerText="Ingredients:"
const vl = document.createElement('div');
vl.setAttribute('class', 'hhvl');
nutrients.appendChild(vl);
nutrition.appendChild(label);
nutrition.appendChild(nutrients);
ingList.appendChild(label2);
ingList.appendChild(ingredients);
tooltip.appendChild(header);
tooltip.appendChild(servingSize);
tooltip.appendChild(nutrition);
tooltip.appendChild(ingList);
wrapper.append(tooltip);
return wrapper; }
This is the link to the grocery store page

JavaScript Table content Add and Delete

I'm working on a table content with JS. What I can update with a button or clear data from the table.
Phone Number: phoneNumber.value
Bay Number: bayNumber.Value (it's not added yet, but will work same)
The First column in the table is always the same (Phone Number and Bay Number), but the second column should change what is in the input after I press the save button (it works fine) Just if I press the delete, it deletes the all table.
I think the problem is how I created the table, but don't know how should I fix it.
//FORM//
var form = document.createElement('div');
form.style.width = "500px";
form.style.height = "500px";
form.style.margin = "auto";
form.style.textAlign = "center";
form.style.paddingTop = "20px";
form.style.background = "grey";
form.classList.add("printVisible");
document.body.appendChild(form);
var phoneNumber = document.createElement("INPUT");
phoneNumber.setAttribute("type", "text");
phoneNumber.value = "07";
phoneNumber.classList.add("hiddenPrint");
form.appendChild(phoneNumber);
var bayNumber = document.createElement("INPUT");
bayNumber.setAttribute("type", "text");
bayNumber.value = "Bay Number";
bayNumber.classList.add("hiddenPrint");
form.appendChild(bayNumber);
var buttonSave = document.createElement("BUTTON");
buttonSave.addEventListener("click", saveDatas);
var buttonSaveT = document.createTextNode("Save");
buttonSave.appendChild(buttonSaveT);
form.appendChild(buttonSave);
var buttonClear = document.createElement("BUTTON");
buttonClear.addEventListener("click", clearDatas);
var buttonClearT = document.createTextNode("Clear");
buttonClear.appendChild(buttonClearT);
form.appendChild(buttonClear);
var phoneNumberT = document.createElement("P");
form.appendChild(phoneNumberT);
var bayNumberT = document.createElement("P");
form.appendChild(bayNumberT);
//SAVE BUTTON//
function saveDatas() {
tablePhoneNumberTx.textContent = phoneNumber.value;
bayNumberT.textContent = bayNumber.value;
}
//CLEAR BUTTON//
function clearDatas() {
tablePhoneNumberTx.textContent = "";
bayNumberT.textContent = "";
}
//TABLE//
let body = document.body;
let tbl = document.createElement("table");
tbl.style.textAlign = "center";
tbl.style.margin = "auto";
let tablePhoneNumberTx = tbl.insertRow();
let tablePhoneNumber = tablePhoneNumberTx.insertCell();
tablePhoneNumber.appendChild(document.createTextNode(`Phone Number`));
tablePhoneNumberTx.appendChild(document.createTextNode(phoneNumber.value));
tablePhoneNumber.style.border = "1px solid black";
tablePhoneNumber.style.width = "250px";
tablePhoneNumberTx.style.border = "1px solid black";
tablePhoneNumberTx.style.background = "250px";
form.appendChild(tbl);
P.S. Its a TamperMonkey Script so, must be everything in JS
some sort of code factorization you could use, but since you wrote "only JS" I wonder why you are referencing CSS classes?
const newEl = ( tag, styling={}, attrbs={} ) =>
{
let elm = document.createElement(tag)
for(let key in styling) elm.style[key] = styling[key]
for(let key in attrbs) elm[key] = attrbs[key]
return elm
};
let myDiv = document.body
.appendChild
( newEl('div'
, {width:'200px', margin:'auto'}
, {className:'toto', textContent:'hello world'}
) );
console.log( myDiv )

How to append two block elements in to a div?

Not sure what I am doing wrong. I know <p> and <h1> are block elements but even with display: inline-block; nothing happens. H1 still overrides the P tag. What am I doing wrong? I've tried multiple methods, I'm sure it's really simple.
The code is below.
let newContent = document.createElement('div');
newContent.classList.add('new');
let mewOne = document.createElement('h1');
newContent.style.cssText = 'border-color: black; background-color:pink;';
mewOne.textContent ="hey, i'm in a div";
let mewTwo = document.createElement('p');
mewTwo.textContent ="me too";
container.appendChild(mewOne, mewTwo);
full code ------
Html
JS
const container = document.querySelector('#container');
const content = document.createElement('div');
content.classList.add('content');
content.textContent = 'My first dom manipulation!';
container.appendChild(content);
//first//
let newContent = document.createElement('div');
newContent.classList.add('new');
let mewOne = document.createElement('h1');
newContent.style.cssText = 'border-color: black; background-color:pink;';
mewOne.textContent ="hey, i'm in a div";
let mewTwo = document.createElement('p');
mewTwo.textContent ="me too";
container.appendChild(mewOne, mewTwo);
//second//
const contentHeading = document.createElement('h3');
contentHeading.classList.add('new');
contentHeading.textContent = "i'm blue h3!";
contentHeading.style.color = 'blue';
container.appendChild(contentHeading);
//third///
const contentParagraph = document.createElement('p');
contentParagraph.classList.add('new');
contentParagraph.textContent ="Hey i'm red";
contentParagraph.style.color = 'red';
container.appendChild(contentParagraph);
//fourth//

HTML tag to javascript createElement

I'm having a lot of problems trying to write an HTML code in Javascript DOM. This website is my last hope.
I want to convert this HTML tag:
<div class="received_msg">
<div class="received_withd_msg">
<p>
<b>Username: </b> Hello everyone!
</p>
</div>
</div>
This is what I have written so far:
var div2 = document.createElement('div');
div2.className = 'received_msg';
var div3 = document.createElement('div');
div3.className = 'received_withd_msg';
var par = document.createElement('p');
var bold = document.createElement('b')
div2.innerHTML += div3.outerHTML;
par.innerHTML += bold.innerHTML + data.username + ' : ' + data.msg;
document.querySelector('#message').append(div2);
document.querySelector('#message').append(par);
The above javascript code doesn't print out the HTML code that I want. What's the proper way to do it?
Note that data.username and data.msg are variables referenced in the full code.
You should be appending the elements you create to their parent elements
var div2 = document.createElement('div');
div2.className = 'received_msg';
var div3 = document.createElement('div');
div3.className = 'received_withd_msg';
var par = document.createElement('p');
var bold = document.createElement('b');
bold.textContent = "hello";
// var boldTxt = document.createTextNode("Hello");
// bold.appendChild(boldTxt);
var txt = document.createTextNode(" World");
div2.appendChild(div3);
div3.appendChild(par);
par.appendChild(bold);
par.appendChild(txt);
document.body.append(div2);
Writing HTML using vanilla JS might be truly confusing :) As written above, appending children to parent elements would be easier and better in many ways. Just to complete the whole idea with your case and all the variables:
var data = {username: 'John Doe', msg: 'Hello World!'};
var root = document.querySelector('#root');
var div2 = document.createElement('div');
div2.className = 'received_msg';
var div3 = document.createElement('div');
div3.className = 'received_withd_msg';
var par = document.createElement('p');
var bold = document.createElement('b');
bold.textContent = `${data.username}: `;
par.appendChild(bold);
var text = document.createTextNode(data.msg);
par.appendChild(text);
div3.appendChild(par);
div2.appendChild(div3);
root.appendChild(div2);
<div id="root"></div>

How to imitate the html BR tag with javascript

Hello right now I have 3 things in the body after the div.
A button and two images. What I want to do is for them to have a new line so the button is in one line, the image is in their own line and the second image is in their own line also.
I tried document.write("<BR>") but it just completely breaks my code.here is the current code
var button = document.createElement("button");
button.innerHTML = "Do Something";
document.body.appendChild(button)
var img7 = document.createElement('img')
img7.src = 'g.png'
document.body.appendChild(img7)
var img8 = document.createElement('img')
img8.src = 'h.png'
document.body.appendChild(img8)
it is in pure javascript so there i can't use <br> to break a new line
You can create and append a <br> in JavaScript the same way you did for each <img>:
var button = document.createElement("button");
button.innerHTML = "Do Something";
document.body.appendChild(button)
var br = document.createElement('br')
document.body.appendChild(br)
var img7 = document.createElement('img')
img7.src = 'g.png'
document.body.appendChild(img7)
document.body.appendChild(br.cloneNode())
var img8 = document.createElement('img')
img8.src = 'h.png'
document.body.appendChild(img8)

Categories