How to load element into a certain tag-CodePudding

I need to load the PDF into a certain tag via Document.querySelector but i don't know how

here is my javascript function:

    showPDF: function (button) {
        let url = document.getElementById("URLinput").value;
        button.style.display = "none";
        let embed = document.createElement("EMBED");
        embed.setAttribute("src", url);
        embed.setAttribute("id", "pdf");
        document.body.appendChild(embed);
    }

and here is my html:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="../css/pdfviewer.css">
</head>

<body>
  <h1>PDF Viewer</h1>
  <input id="show" type="button" value="PDF anzeigen" onclick="HM.PDFViewer.showPDF(this)" />

  <input id="URLinput" type="text" value="/pdf/Doku.pdf" />

  <script type="text/javascript" src="/js/pdfviewer.js"></script>
</body>

</html>

CodePudding user response：

EMBED's functionality has been standardized in HTML5 and is used to provide containers for plugins. The main problem with EMBED is its dependency on plugins to be loaded, which has become less common nowadays. Instead, you could either use IFRAME (which can include HTML pages and possibly other media) or