Javascript 如何生成具有图像和文本的预览片段的呈现，如Facebook显示

我想生成一些东西来显示，它看起来像是使用纯javascript的Facebook应用程序预览。我已经有了图像url、标题和描述数据。但是，我不知道从何处开始渲染，完全如下所示：

---

通常，如何用javascript实现这一点？您必须手动指定CSS吗？我真的很感激任何建议和资源建议。我对javascript和UI非常陌生。

所以我们的目标是：

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

3我们使用property和/或在其他元素中添加元素，通常从创建最外层的元素开始，逐个创建每个子元素，并调用父元素的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，您可以将新元素附加到页面中您喜欢的任何位置

---

总而言之，您可以使用前面提到的功能和每个浏览器中提供的许多现成功能，通过js对文档进行反应和操作。

简而言之，这个过程类似于：使用AJAX获取URL。b解析响应。c提取开放图元标记以查找标题、描述和图像。如果未指定OG元标记，则返回到源中的元标题、描述和第一个图像。e呈现自定义样式的预览o，您的问题是关于布局和标记呈现的？您是否使用了一些框架，如react？还是我们在谈论普通js？谢谢你的步骤。我编辑了我的问题以提供更多的上下文。我已经解析了open graph元标记。我主要想知道如何像Facebook那样使用纯js呈现预览。这种ui格式是否已经在javascript中可用，或者我必须尝试手动重新创建显示以匹配其版本？请阅读并创建一个，这是一个非常简单、基本的CSS相关问题，与JS无关如果您已经有预览内容，您可以发布您为呈现预览而编写的HTML和CSS吗？在这个阶段，不需要使用JavaScript，只需要在页面上看到最终的HTML。

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

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.