javascript - 与 jQuery 的 $() 不同，由于 document.getElementById() 和 document.querySelector() 不返回节点，无法在 vanilla JS 上附加子项

Question

我做不到:

document.querySelector("#myDiv").appendChild("<img src='./img/mine.png' class='mine hidden'></img>");

或:

document.getElementById("myDiv").appendChild("<img src='./img/mine.png' class='mine hidden'></img>");

这两种方法都将文本放入调用它们的 div 中。唯一有效的是:

$("#myDiv").append("<img src='./img/mine.png' class='mine hidden'></img>");

我相信这是因为 jQuery 的 $() 的普通 JS 替代品不返回节点。

console.log(document.getElementById("myDiv"))
console.log(document.querySelector("#myDiv"))
console.log($("#myDiv"))
document.getElementById("myDiv").append("<p>Hi</p>")
document.querySelector("#myDiv").append("<p>Hi</p>")
$("#myDiv").append("<p>Hi</p>")

div {
height: 80px;
background-color: green;
width: 100%;
}

p {
background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv"></div>

Answer 1

Vanilla JS 具有设置 HTML 节点内部值的功能。

也许试试这个而不是追加函数:

document.getElementById("myDiv").innerHTML = "<img src='./img/mine.png' class='mine hidden'></img>"