如何使用document.querySelector将pdfObject追加到HTML指定div加载PDF？

你的代码存在几个关键问题，修正后即可实现需求：

原代码的问题 #

1. 选择器未正确定义：selector是未声明的变量，要获取id为selector的div，需传入正确的选择器字符串'#selector'给document.querySelector。
2. DOM元素调用错误：let a = document.querySelector(selector)!= null;得到的是布尔值（仅判断元素是否存在），后续document.a.appendChild写法完全错误，应直接获取目标DOM元素后调用其appendChild方法。
3. 可选优化点：建议给生成的OBJECT标签设置宽高属性，否则PDF可能无法正常显示。

修正后的JavaScript代码 #

showPDF: function (button) {
    let url = document.getElementById("URLinput").value;
    button.style.display = "none";
    let pdfObject = document.createElement("OBJECT");
    pdfObject.setAttribute("data", url);
    pdfObject.setAttribute("id", "pdf");
    // 设置宽高，确保PDF有足够显示空间
    pdfObject.setAttribute("width", "100%");
    pdfObject.setAttribute("height", "800px");
    // 获取目标div元素
    let targetDiv = document.querySelector('#selector');
    // 确认元素存在后再追加
    if (targetDiv) {
        targetDiv.appendChild(pdfObject);
    }
},

对应的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>

  <div id="selector"></div>
  <p> test </p>
</body>

关键说明 #

• document.querySelector('#selector')通过CSS id选择器精准获取目标div，#是id选择器的标准语法。
• 先判断目标元素是否存在再执行追加，可避免空指针报错。
• 给OBJECT标签设置宽高是为了保证PDF内容正常展示，你可根据实际需求调整数值。

内容的提问来源于stack exchange，提问作者My Play