Свяжите объект JavaScript в HTML

Как я смогу извлечь данные из JS-скрипта в свой HTML-код? Я хочу извлечь объекты «Заголовок», «Описание» и «Ссылка» и отобразить их в моем HTML-коде.

Вот код:

<div class = "roadMap" id = "roadMap"></div>

<script src = "/siteassets/bootstrap3/js/jquery-1.8.3.min.js"></script>
<script src = "/publiccdnlib/PnP-JS-Core/pnp.min.js"></script>
<script type = "text/javascript" src = "/publiccdnlib/es6-Promise/es6-promise.auto.js"></script>
<script type = "text/javascript" src = "/publiccdnlib/fetch/fetch.min.js"></script>
<script src = "/publiccdnlib/slick/slick.min.js"></script>
<script src = "/publiccdnlib/CommonJS/CommonJS.js"></script>
<script src = "/publiccdnlib/knockout/knockout.js"></script>
<script src = "/publiccdnlib/knockout/knockout.simpleGrid.3.0.js"></script>
<script src = "/publiccdnlib/toastr/toastr.min.js"></script>
<script src = "/publiccdnlib/dialog/open-sp-dialog.js"></script>
<!--END Scripts for O365-->

<script>
  $pnp.setup({
    baseUrl: "https://fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training"
  });

  $pnp.sp.web.lists.getByTitle("O365RoadMap").items.get().then(function(z) {
    console.info(z);
    var result = z.results.map(a => ({
      Title: `${a.Title}`,
      Description: `${a.Description}`,
      Link: `${a.Link}`
    }))
    console.info(result);
    document.getElementById("roadMap").innerHTML = JSON.stringify(result, null, 2)
  })
</script>

<html lang = "en">

<body>

  <div>
    /* Code goes here */
  </div>

  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

Итак, вам нужно создать элементы и установить текст?

— 20.07.2018 18:31

Мне просто нужно вывести заголовок, описание и ссылку на объекты Javascript в шаблон HTML.

— 20.07.2018 18:32

Так в чем проблема? var html = `<h1>${a.title}</h1>`

— 20.07.2018 18:34

javascript jquery html twitter-bootstrap

20.07.2018 18:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

446

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я вижу, что вы используете jQuery, поэтому я отвечу относительно него.

Используя jQuery, вы можете поместить текст где угодно, используя метод text.

Например, если вы хотите поместить данные Title в свой div, вы можете сделать:

$("div").text(result.Title);

Приведенный выше код поместит result.Title в каждый div на странице (у вас есть только один из них).

Вы также можете использовать так много методов jQuery, как append, prepend и html. Добавить поместит текст после существующего содержимого элемента. Prepend помещает текст перед существующим содержимым элемента. Html заменяет HTML внутри элемента.

Итак, если вы хотите создать элементы HTML, поместите их на ДОМ (веб-страницу), вы можете сделать:

$(document).ready(function(){
    var head = '<h1>${result.Title}</h1>';
    var desc = '<p>${result.Description}</p>'; 
    var link = '<a src = "${result.Link}">${result.Link}</a>';
    $("div").html(head + desc + link);
});

Чтобы поместить ваши Title, Description и Link в DOM. Надеюсь, это поможет вам, удачи!

20.07.2018 18:37