Question

嘿伙计我在这里有一些代码应该执行以下操作：使用jquery将图像附加到DOM，我的示例也使用本机js完成。

我的问题是我不知道jquery足以通过点击jquery按钮获得放置在DOM上的新图像。

<!DOCTYPE html>
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
// native js
<script>
var $ = function (id)   
{                       
   return document.getElementById(id);
}               
var showImg = function () {
var img = new Image();
var div = document.getElementById('container');
div.appendChild(img);
img.src = "http://www.palomar.edu/images/assets/pclogo.jpg";
};
window.onload = function ()
{
$("showImgJavaScript").onclick = showImg;       
}
</script>

// jquery
<script> 
$( document ).ready(function() {

    $( "#showImgjQuery").click(function() {

        $( "div.image" ).append("<img src='http://www.palomar.edu/images/assets/pclogo.jpg'>");
    });

});
</script>
</head> 
<body> 
<div id="container"> 
    <p>Image goes here </p> 
</div> 
<div id="image"> 
    <p> Some other content goes here </p> 
</div> 
</body> 
<input type="button" id="showImgJavaScript" value="Insert Image--DOM">
<input type="button" id="showImgjQuery" value="Insert Image--jQuery">

</html>

Answer 1

.image应为#image，因为您使用ID而不是CLASS
范围。您的$别名正由您的JS vanilla函数使用，因此会污染window.jQuery使用$的全局名称空间作为（完全！）jQuery的别名。

2个解决方案：

对于document.ready函数速记$(functon(){，将函数名称设置为jQuery，并将$别名作为函数参数传递：

jQuery(function( $ ) { // DOM READY and secured $ (jQuery) alias

现在$在函数范围内是安全的：

的 LIVE DEMO 的

function $(id) { return document.getElementById(id); } function showImg() { var img = new Image(); var div = document.getElementById('container'); div.appendChild(img); img.src = "http://www.palomar.edu/images/assets/pclogo.jpg"; } window.onload = function (){ $("showImgJavaScript").onclick = showImg; }; jQuery(function( $ ) { // secure alias !!!!!!!!!!! $( "#showImgjQuery").click(function() { $("#image").append("<img src='http://www.palomar.edu/images/assets/pclogo.jpg'>"); }); });

的 LIVE DEMO 的

通过将您的JS包装到IIFE（立即调用的函数表达式）中，您将了解您的问题，因为在这种情况下，内部$将可用于函数范围

(function vanilla(){ function $(id) { return document.getElementById(id); } function showImg() { var img = new Image(); var div = document.getElementById('container'); div.appendChild(img); img.src = "http://www.palomar.edu/images/assets/pclogo.jpg"; } window.onload = function (){ $("showImgJavaScript").onclick = showImg; }; }()); $(function() { $( "#showImgjQuery").click(function() { $("#image").append("<img src='http://www.palomar.edu/images/assets/pclogo.jpg'>"); }); });

Answer 2

$( document ).ready(function() {

    $( "#showImgjQuery").click(function() {

        $( "#container" ).append("<img src='http://www.palomar.edu/images/assets/pclogo.jpg'>");
    });

});

jQuery Dom操作.append（）

2 个答案:

2个解决方案：