Как сгенерировать рендеринг фрагмента предварительного просмотра с изображением и текстом, как в Facebook

Question

Я хотел бы создать что-то для отображения, которое выглядит как предварительный просмотр приложения Facebook с использованием простого JavaScript.У меня уже есть URL изображения, заголовок и данные описания.Тем не менее, я понятия не имею, с чего начать рендеринг в точности так:

Предварительный просмотр карт Google

Обычно, как вы делаете это в JavaScript?Вы должны вручную указать CSS?Буду очень признателен за любые советы и предложения по ресурсам.Я очень плохо знаком с JavaScript и пользовательским интерфейсом.

Answer 1

Итак, наша цель - что-то вроде:

<div class="containerDiv">
    <img src="blah blah">
    <div>
       <div  class="urlDiv">my.url.com</div>
       <div class="titleDiv">My title</div>
       <div class="descriptionDiv">My description</div>
    </div>
</div>

Вам, конечно, нужно немного стилизовать.Ваша страница обычно загружает много таблиц стилей CSS.К одному из них вы можете добавить CSS, который будет стилизовать ваш новый «компонент».Как пример:

<style>
    .containerDiv {
         display:flex;
         align-items:center;
         border:solid 1px gray;
         /* etc... */
    }

    .containerDiv > img { /*...style for the image...*/ }
    /*...more styles...*/
</style>

Мой ответ не будет включать правильный CSS.Углубленное изучение css само по себе является долгим процессом, так что наберитесь терпения.Следуйте хорошему руководству по CSS, если вам это нужно.

Пойдем дальше.Следующим шагом является рендеринг вышеупомянутой разметки с помощью js.Чтобы добиться этого с простым js, используйте собственные функции:

1) document.createElement , чтобы создать новый элемент.Это возвращает объект js, содержащий представление элемента html.Это еще не добавлено к документу.Он не виден, пока не является частью страницы.

2) Вы можете управлять этим объектом, используя: setAttribute () .Атрибут - это все, что следует за именем вашего тега.Например, чтобы установить источник вызова изображения:

const myImg = document.createElement("img");
myImg.setAttribute("src", "https://my.cool/image.png"); //the image is still not visible, because we did not yet append it into the DOM... 

3) Мы используем свойство innerHTML и / или append child для добавления элементов в другие элементы(обычно вы начинаете с создания самого внешнего элемента, создаете каждый дочерний элемент один за другим и вызываете appendChild родительского элемента для добавления каждого дочернего элемента).

4) Когда вы будете готовы создать весь элемент целиком, добавляйте его в любое местокак в документе, и он станет видимым:

const myCoolElement = document.createElement("div");
//do stuff
document.body.appendChild(myCoolElement); //this will put it at the end of the page

//or, alternativelly
document.querySelector(".myElement > #thatWillHost .my .newComponent").appendChild(myCoolElement); //to append it somewhere else.

В качестве примечания, querySelector и querySelectorAll также будут полезными функциями для вас.Используя querySelector, вы можете добавлять новый элемент в любое место на странице, которая вам нравится.

В заключение, вы можете реагировать и манипулировать документом через js, используя упомянутые (и многие другие) функции, которые доступны изиз коробки в каждом браузере.