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>

标签： javascriptjqueryhtml

Answer 1

appendChild()需要一个节点，而不是像 jQuery 那样的字符串append()。因此，您可以通过创建一个img元素然后将其作为参数提供给 来完成这项工作appendChild()，如下所示：

var img = new Image(); // alternative: document.createElement('img');
img.src = './img/mine.png';
img.className = 'mine hidden';
document.querySelector("#myDiv").appendChild(img);

<div id="myDiv"></div>