與 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 的 $() 的 vanilla 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

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>

Answer 2

Vanilla JS 具有設置 HTML 節點內部值的功能。

也許試試這個而不是 append 函數：

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