jQueryはdivタグ内に画像を追加します


154

divタグがあります

<div id="theDiv">Where is the image?</div>

div内にイメージタグを追加したい

最終結果:

<div id="theDiv"><img id="theImg"  src="theImg.png" />Where is the image?</div>

回答:


301

以下を試しましたか?

$('#theDiv').prepend('<img id="theImg" src="theImg.png" />')

10
上記のJose Basilioに応答することはできません(十分な担当者ではありません)が、「画像はどこですか?」の後に追加すると表示されます。Prependは前に置きます。
Topher Fangio

4
プリペンドを使用することについて賛成しようとしていましたが、セレクターに「#」がないことに気付きました...
Ben Koehler

1
アペンドで銃をジャンプしました。良いキャッチ。+1
ホセ・バジリオ

appendToは機能しません...少なくとも私のコードでは、このスレッドを投稿する前でも、jQueryのドキュメントページでそれを読んだ後、それを使用するのは適切ではありませんでした。
PositiveGuy

.append()および.html()を使用してイメージタグを追加しようとしましたが、<img>タグがソースとともに適切に表示されているにもかかわらず、イメージがロードされていません。これについて何か提案はありますか?
AnoopGoudar 2017年

52

私の2セント:

$('#theDiv').prepend($('<img>',{id:'theImg',src:'theImg.png'}))

$( '<img>')の使用法のこの答えが好きで、探していました。
user734028

$( '<img')。attr( 'id'、 'theImg')。attr( 'src'、 'theImg.png')の後に属性を追加することもできます
Scott


10

<div>関数image()が呼び出されるたびにタグのコンテンツを変更する場合は、次のようにする必要があります。

JavaScript

function image() {
    var img = document.createElement("IMG");
    img.src = "/images/img1.gif";
    $('#image').html(img); 
}

HTML

<div id="image"></div>
<div><a href="javascript:image();">First Image</a></div>

1
説明を追加することをお勧めします。
Olter、2014

1
<div>タグの内容を変更する場合は、関数image()が呼び出されるたびに行います。このようにする必要があります/関数image(){var img = document.createElement( "IMG"); img.src = "/images/img1.gif"; $( '#image')。html(img); } <div id = "image"> </ div> <div> <a href="javascript:image();">最初の画像</a> </ div>
Manjeet Kumar 14

6

Manjeet Kumarの投稿に加えて(彼には宣言がありませんでした)

var image = document.createElement("IMG");
image.alt = "Alt information for image";
image.setAttribute('class', 'photo');
image.src="/images/abc.jpg";
$(#TheDiv).html(image);

2
var img;
for (var i = 0; i < jQuery('.MulImage').length; i++) {
                var imgsrc = jQuery('.MulImage')[i];
                var CurrentImgSrc = imgsrc.src;
                img = jQuery('<img class="dynamic" style="width:100%;">');
                img.attr('src', CurrentImgSrc);
                jQuery('.YourDivClass').append(img);

            }
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.