[英]Insert Cite element in HTML using javascript dom
我想在 HTML 中存在但为空的页脚标签中添加一个带有文本和 href 的引用元素(当前)
我正在使用此代码,但它不起作用。
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);
我希望在其中插入 dom 元素的 HTML 页面的代码是
<!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>
请注意,我不能在 JS 文件和 document.write 中使用 HTML 标记
你很亲密。
此示例使用cite.textContent =
设置cite
元素的内容,而不是设置名为“text”的属性。
它还使用ftr.appendChild(cite)
将cite
元素添加到ftr
页脚元素。 这是因为innerHTML
不采用 DOM 元素,而是采用 HTML 字符串。 所以ftr.innerHTML = '<span>hello world</span'
会起作用,但ftr.innerHTML = cite
不会。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.