在另一个innerHTML js中输出html个元素内容

Question

我想创建动态 URL。域部分应保持不变。例如：在这个 URL "https://www.google.com/search?" 中，我想附加从另一个网站获取的内容。

我使用此 js 获取结果并将结果存储到 Html 元素 "KK1"

<script>
'use strict';

(async () => {
let response = await fetch('https://api.com/values/1');

let text = await response.text(); // read response body as text

document.getElementById("KK1").innerHTML = (text.slice(0, 80) );

})()
</script>

假设从 fetch 收到的响应是 amoeba1，我想生成一个像 "https://www.google.com/search?amoeba1"[=32] 的 URL =]

我的代码

<!DOCTYPE html> <html> <head><script> 'use strict'; (async () => { let response = await fetch('https://api.exchangeratesapi.io/latest?symbols=USD,GBP'); let text = await response.text(); // read response body as text document.getElementById("KK1").innerHTML = (text.slice(0, 80) ); })() </script> <title>My title Dowmloder.rar</title> </head> <body> <h2>My First Web Page</h2> <p>My First Paragraph.</p> Generate clickable URL from parameters. <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "https://www.google.com/search?"+ "I ADD WHAT HERE TO??"; </script> BELOW IS THE STRING I WANT TO APPEND. <p id="KK1"></p> </body> </html>

如何附加获取的字符串？字符串已经在 <p id="KK1"></p>

期待获得帮助。

Answer 1

也许您可以修改脚本，将 API 调用的文本结果存储在变量中，然后使用模板文字，使用 ${} 为 demo 构建新字符串元素.

const resultText = text.slice(0, 80);
document.getElementById("KK1").innerHTML = resultText;
document.getElementById("demo").innerHTML = `https://www.google.com/search?${resultText}`;

或者还有其他连接字符串的方法，例如：

'https://www.google.com/search?' + resultText

在此处进一步阅读：Template literals (Template strings)

更新：

所以你需要合并这两个 <script> 标签。

我想这会为你完成这项工作：

'use strict';

(async () => {
   let response = await fetch('https://api.exchangeratesapi.io/latest?symbols=USD,GBP');

   let text = await response.text(); // read response body as text

   // essential modified part:
   const resultText = text.slice(0, 80);
   document.getElementById("KK1").innerHTML = resultText;
   document.getElementById("demo").innerHTML = `https://www.google.com/search?${resultText}`;
})();

别忘了删除这个：

<script>
   document.getElementById("demo").innerHTML = "https://www.google.com/search?"+ "I ADD WHAT HERE TO??"; 
</script>

希望对您有所帮助！

Answer 2

document.getElementById("demo").innerHTML = "https://www.google.com/search?" + document.getElementById("KK1").innerHTML

Answer 3

您正在寻找锚标签并且您想要添加动态 href:

<!DOCTYPE html>
<html>
<head><script>
'use strict';
var res = "";
(async () => {
let response = await fetch('https://api.exchangeratesapi.io/latest?symbols=USD,GBP');

let text = await response.text(); // read response body as text

document.getElementById("KK1").innerHTML = (text.slice(0, 80) );

document.getElementById("demo").innerHTML = "https://www.google.com/search?"+  text;
document.getElementById("demo").href = "https://www.google.com/search?"+  encodeURI(text);
})()
</script>
<title>My title Dowmloder.rar</title>
</head>
<body>

<h2>My First Web Page</h2>
<p>My First Paragraph.</p>

Generate clickable URL from parameters.

<a id="demo"></a><br>


BELOW IS THE STRING I WANT TO APPEND.
<p id="KK1"></p> 
</body>
</html>

在另一个innerHTML js中输出html个元素内容

Output html element content in another innerHTML js

javascript

innerhtml

fetch-api