Insert Cite element in HTML using javascript dom

Question

I want to add a cite element with a text and href in the footer tag which is present in the HTML but is empty (currently)

I am using this code but its not working.

let cite = document.createElement("cite");
cite.setAttribute("text","Information and photos from Wikipedia");
cite.setAttribute("href", "https://en.wikipedia.org/wiki/Bumblebee");
let ftr = document.getElementsByTagName('footer')[0];
ftr.innerHTML(cite);

Code of the HTML page where I wish to insert the dom element is

<!DOCTYPE html>
<html lang="en">
<!-- DO NOT MODIFY THIS FILE OTHER THAN REFERENCING THE SCRIPT FILE -->

<head>
  <meta charset="UTF-8">
  <title>Assignment 5a</title>
  <link href="style.css" rel="stylesheet" />
</head>

<body>
  <header>
    <h1>Bumblebee</h1>
  </header>

  <main>
    <h2>General description</h2>

    <figure><img src="bee1.jpg" />
      <figcaption>A common bumblebee extending its tongue towards a Heuchera inflorescence.
      </figcaption>
    </figure>

    <p>Bumblebees  beast".</p>


    <h2>Distribution and habitat</h2>

    <figure><img src="bee2.jpg" />
      <figcaption>Cuckoo bumblebees have similar warning coloration to
        nest-making bumblebees.</figcaption>
    </figure>

    <p>Bumblebees t pollinators.</p>
  </main>
  <footer>

  </footer>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

Please note that I cannot use HTML tag in JS file and document.write

Answer 1

You are very close.

This example uses cite.textContent = to set the content of the cite element instead of setting an attribute called "text".

It also uses ftr.appendChild(cite) to add the cite element to the ftr footer element. This is because innerHTML does not take DOM elements, but an HTML string instead. So ftr.innerHTML = '<span>hello world</span' would work, but ftr.innerHTML = cite does not.

 let cite = document.createElement("cite"); cite.textContent = "Information and photos from Wikipedia"; cite.setAttribute("href", "https://en.wikipedia.org/wiki/Bumblebee"); let ftr = document.getElementsByTagName('footer')[0]; ftr.appendChild(cite);

 <.DOCTYPE html> <html lang="en"> <.-- DO NOT MODIFY THIS FILE OTHER THAN REFERENCING THE SCRIPT FILE --> <head> <meta charset="UTF-8"> <title>Assignment 5a</title> <link href="style.css" rel="stylesheet" /> </head> <body> <header> <h1>Bumblebee</h1> </header> <main> <h2>General description</h2> <figure><img src="bee1.jpg" /> <figcaption>A common bumblebee extending its tongue towards a Heuchera inflorescence. </figcaption> </figure> <p>Bumblebees beast".</p> <h2>Distribution and habitat</h2> <figure><img src="bee2.jpg" /> <figcaption>Cuckoo bumblebees have similar warning coloration to nest-making bumblebees.</figcaption> </figure> <p>Bumblebees t pollinators.</p> </main> <footer> </footer> <script type="text/javascript" src="script.js"></script> </body> </html>

Insert Cite element in HTML using javascript dom

Question

1 answers

solution1
2 2021-03-22 12:06:59

Insert Cite element in HTML using javascript dom

Question

1 answers

solution1 2 2021-03-22 12:06:59

solution1
2 2021-03-22 12:06:59