Вывести html содержимое элемента в другой внутренний HTML js - PullRequest
Новая
       5

Вывести html содержимое элемента в другой внутренний HTML js

0 голосов
/ 11 января 2020

Я хочу создать динамический c 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>

Предполагая, что ответ, полученный от выборки, равен amoeba1 , I хотите создать URL-адрес, например "https://www.google.com/search?amoeba1"

Мой код 

 <!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>

Ожидание получения помощи.

Ответы [ 3 ]

0 голосов
/ 11 января 2020

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

0 голосов
/ 12 января 2020

Вы ищете метку привязки и хотите добавить динамику c 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>
0 голосов
/ 11 января 2020

Может быть, вы можете изменить свой сценарий, чтобы хранить в переменной текстовый результат от вашего вызова 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

Подробнее читайте здесь: Литералы шаблона (строки шаблона)

Обновление:

Так что вам нужно объединить эти два тега <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>

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...