add an element in the DOM

I realise this page on html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Size Checker</title>
    <script src="size.js" defer></script>
</head>

<body>
    

        <h1>Size Checker</h1>
    
    <time datetime="4:57:55 p.m"></time>
<ul>
<li class="screen">Screen:</li>
<li class="outer">Window Outer:</li>
<li class="inner">Window Inner:</li>
<li class="doc">Document:</li>
</ul>
</body>
</html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Size Checker</title>
    <script src="size.js" defer></script>
</head>

<body>
    

        <h1>Size Checker</h1>
    
    <time datetime="4:57:55 p.m"></time>
<ul>
<li class="screen">Screen:</li>
<li class="outer">Window Outer:</li>
<li class="inner">Window Inner:</li>
<li class="doc">Document:</li>
</ul>
</body>
</html>

my js:

const temps=document.querySelector('time').datetime;
let actuel=new Date() .toLocaleString();
temps.innerHTML=actuel;

const screen=document.querySelector('.screen');
const outer=document.querySelector('.outer');
const inner=document.querySelector('.inner');
const doc=document.querySelector('.doc');

const valeur=document.createElement("span");
screen.appendChild(span);
valeur.textContent="iuyfvkdjhjlf"

console.log(screen);

const temps=document.querySelector('time').datetime;
let actuel=new Date() .toLocaleString();
temps.innerHTML=actuel;

const screen=document.querySelector('.screen');
const outer=document.querySelector('.outer');
const inner=document.querySelector('.inner');
const doc=document.querySelector('.doc');

const valeur=document.createElement("span");
screen.appendChild(span);
valeur.textContent="iuyfvkdjhjlf"

console.log(screen);

the problem he span elemnt don't appear on the html ? can get some idea to fix it

5 Replies

Mannix•11mo ago

you want to use the name of the variable on that append not a name of a element

Pat66OP•11mo ago

don t understand you

Mannix•11mo ago

change screen.appendChild(span); to screen.appendChild(valeur);

Pat66OP•11mo ago

nothing append

const valeur=document.createElement("span");
screen.appendChild(valeur);
valeur.textContent="iuyfvkdjhjlf";

const valeur=document.createElement("span");
screen.appendChild(valeur);
valeur.textContent="iuyfvkdjhjlf";

Jochem•11mo ago

your code is producing an error earlier on (though what mannix said is still accurate) in javascript, the datetime attribute is accessed using the dateTime property, so the first line has to be:

const temps=document.querySelector('time').dateTime;

const temps=document.querySelector('time').dateTime;

you should look at the javascript console in the devtools any time code doesn't work as expected, a lot of the time there will be errors that can guide you to the correct solution

Gaming

Programming

add an element in the DOM