javascript - 如何从元素中获取单词内容并将其附加到 href 的 URL 末尾？

Question

Anki 中有一个叫做“字典链接”的功能，正如手册所解释的那样:

Dictionary Links

You can also use field replacement to create dictionary links.

Imagine you’re studying a language and your favourite online dictionary allows you to search for text using a web URL like: http://example.com/search?q=myword

You could add an automatic link by doing the following in your template:

{{myword}}

<a href="http://example.com/search?q={{myword}}">check in dictionary</a>

The template above would allow you to search for each note’s expression by clicking on the link while reviewing.

我现在正在从头学习HTML + CSS + Javascript，我想在我自己的练习网站上添加一个类似的工具。我想复制一个元素的文本内容(我要查字典的词)，添加到url的末尾。当我单击链接时，相应的字典页面将显示。

例如:

<span id="search">entry</span>

复制“条目”并将其添加到末尾

<a id="dictionary" href="http://example.com/search?q=">link</a>

由于我是一个完全的初学者，所以我还没有学习 jQuery 或其他工具。仅通过 HTML 和 Javascript 可以做到这一点吗？

Answer 1

const search = document.getElementById("search");
const link = document.getElementById("dictionary");

link.href = `http://example.com/search?q=${search.innerText}`;

您必须通过获取 search 元素的 innerText 将新的 href 属性分配给 link