用 jQuery 动态创建 img 标签？答案

【问题标题】：dynamically created img tag with jQuery?用 jQuery 动态创建 img 标签？
【发布时间】：2012-04-17 21:16:50
【问题描述】：

如何在表格内动态创建标签。首先创建链接，然后在链接内部创建一个 img 标签，就像我有..

<table>
    <tr>
        <td>
            <a>
                <img />
            </a>

            // Add Some more when every time my function is run..? like that 
            // <a>
            //  <img/>
            // </a>

        </td>
    </tr>
</table>

我正在使用这个内部函数，但它没有帮助我。

$(document.createElement("img")).attr('Some attr');

【问题讨论】：

这很容易通过查阅官方 jQuery 文档进行研究。 api.jquery.com/append
如果你得到了你想要的信息，不要忘记将答案标记为已接受

标签： javascript jquery asp.net image dom

【解决方案1】：

如果您通过“jquree”表示 JQuery，那么试试这个：

$('table tr td').append('<a href="#"><img src="/favicon.ico"/></a>');

【讨论】：

【解决方案2】：

好吧，我不打算回答这个问题，但我没有看到任何正确答案（来自我的 POV）：

function addElement(tdId) { // Specify the id the of the TD as an argument
    $('#' + tdId).append( // Append to the td you want
        $('<a></a>').attr({ // Create an element and specify its attributes
            'href': '/home',
            'title': 'Home'

        }).append( // Also append the image to the link
            $('<img />').attr({ // Same, create the element and specify its attributes
                'src': 'image.png',
                'width': '100px',
                'height': '100px'
            })
        ) // Close the "append image"
    ) // Close the "append anchor"
}

现在这是一个纯粹的 jQuery 答案。 javascript 的答案如下：

function addElement(tdId) { // Specify the id the of the TD as an argument
    // Create the DOM elements
    var a = document.createDocumentFragment('a'),
        img = document.createDocumentFragment('img') // See the use of document fragments for performance

    // Define the attributes of the anchor element
    a.href = '/home'
    a.title = 'Home'

    // Define the attributes of the img element
    img.src = 'image.png'
    img.width = '100px'
    img.height = '100px'

    // Append the image to the anchor and the anchor to the td
    document.getElementById(tdId).appendChild(a.appendChild(img))
}

我觉得js版本的可读性更好。但这只是我的看法；o)。

【讨论】：

【解决方案3】：

$(document).ready(function(){

   $('.any_element_you_want').html('<a href="/home" title="Home"><img src="image.png"></a>');

});

【讨论】：

【解决方案4】：

var td = $('table tr td');
td.append('<a><img src="whatever.jpg"/></a>');

【讨论】：

【解决方案5】：

使用 jquery，然后像下面这样创建图像元素

$(document).ready(function(){  

    var elem = new Element('img', 
              { src: 'pic.jpg', alt: 'alternate text' }); 
   $(document).insert(elem); //here you can also make use of `append` method instead of this method
}

或

var img = new Image(1,1);  ///params are optional 
img.src = ''pic.jpg';

【讨论】：

@QasimRamzan - 如果它满足您的要求，请接受并支持答案

【解决方案6】：

在每次点击按钮时，它都会添加带有图片 url abc.png 的 img 标签并添加到具有 id imagediv 的 div。

$("button").click(function()
 {
     var img=$('<img id="dynamic">');     
     $(document.createElement('img'));
     img.attr('src',"abc.png");
     img.appendTo('#imagediv');
  });

【讨论】：