使用JavaScript插入文字

Question

我想讓文本顯示使用JavaScript，但我似乎無法得到它的工作，並且我不完全清楚爲什麼。

它似乎被拾起，但我似乎無法看到它實際上顯示任何地方。

這是代碼：

<script type="text/javascript"> 
jQuery('.set1').each(function() { 
    jQuery(this).before(jQuery('<img>').text("Some Text put here with Javascript... ")); 
}); 
</script> 

<div class="image_carousel"> 
    <div id="foo1"> 
<img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/vision-db-1.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="679" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/vision-db-2.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="679" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/vision-db-3.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="692" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/vision-7.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="339" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/vision-8.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="338" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/vision-db-4.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="691" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/vision-11.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="339" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/vision-12.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="339" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/smug-1.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="710" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/smug-2.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="710" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/smug-3.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="710" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/smug-4.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="710" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/smug-5.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="710" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/volt-4.png" class="set2" alt="Photography | Rory DCS" width="675" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/volt-1.png" class="set2" alt="Photography | Rory DCS" width="675" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/volt-7.png" class="set2" alt="Photography | Rory DCS" width="675" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/volt-9.png" class="set2" alt="Photography | Rory DCS" width="675" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/volt-3.png" alt="Photography | Rory DCS" width="675" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/volt-11.png" class="set2" alt="Photography | Rory DCS" width="675" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/hay-5.png" class="set3" alt="Photography | Alex Sainsbury" width="312" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/hay-4.png" class="set3" alt="Photography | Alex Sainsbury" width="300" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/hay-2.png" class="set3" alt="Photography | Alex Sainsbury" width="279" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/hay-3.png" class="set3" alt="Photography | Alex Sainsbury" width="292" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/hay-1.png" class="set3" alt="Photography | Alex Sainsbury" width="308" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/gana-1.png" class="set4" alt="Photography | Robert Charbonnet" width="675" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/gana-2.png" class="set4" alt="Photography | Robert Charbonnet" width="300" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/gana-3.png" class="set4" alt="Photography | Robert Charbonnet" width="300" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/gana-4.png" class="set4" alt="Photography | Robert Charbonnet" width="300" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/Peregrine-Shot_03-4.png" alt="Photography | David Goldman" width="675" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/Peregrine-Shot_09-84.png" alt="Photography | David Goldman" width="300" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/Peregrine-Shot_10-192.png" alt="Photography | David Goldman" width="300" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/Peregrine-Shot_16-48.png" alt="Photography | David Goldman" width="675" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/Peregrine-Shot_17-131.png" alt="Photography | David Goldman" width="300" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/ss2011-shot05-173.png" alt="Photography | David Goldman" width="300" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/ss2011-shot06-72-1.png" alt="Photography | David Goldman" width="300" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/09/vc-db-1.png" alt="Photography | Chad Pickard and Paul McLean" width="672" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/09/vc-3.png" alt="Photography | Chad Pickard and Paul McLean" width="343" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/09/vc-4.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="342" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/09/vc-db-2.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="671" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/09/vc-7.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="298" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/09/vc-8.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="299" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/09/vc-db-3.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="694" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/09/vc-db-4.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="685" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/09/vc-13.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="341" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/09/vc-14.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="343" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/09/vc-15.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="342" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/lurve-5.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="301" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/lurve-2.png" class="set1" alt="Photography | Chad Pickard and Paul McLean" width="673" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/lurve-3.png" class="set1"alt="Photography | Chad Pickard and Paul McLean" width="301" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/vampire-weekend.png" class="set2" alt="Photography | Alan Clarke" width="660" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/grizzle-bear.png" class="set2" alt="Photography | Alan Clarke" width="660" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/tg-5.png" class="set3" alt="Photography | Harley Weir" width="588" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/tg-11.png" class="set3" alt="Photography | Harley Weir" width="343" height="450" /><img src="http://www.dwmu.co.uk/wp-content/uploads/2011/07/tg-12.png" class="set3" alt="Photography | Harley Weir" width="341" height="450" /> 
    </div> 
    <div class="clearfix"></div> 
    <a class="prev" id="foo1_prev" href="#"><span>prev</span></a> 
    <a class="next" id="foo1_next" href="#"><span>next</span></a> 
    <div class="logbox" id="foo1_log"><p>Click the previous- or next-button</p></div> 
</div> 

任何想法？

Answer 1

想要的圖像之前把文本

？

http://jsfiddle.net/pixelass/nBVwz/

$('.set1').each(function() { 
    $(this).before('<span>Some Text put here with Javascript... </span>'); 
}); 

或http://jsfiddle.net/pixelass/nBVwz/1/如果我沒有看錯，你試圖把文本圖像標記使用的圖像

$('.set1').each(function() { 
    var text = $(this).attr('alt');//get the alt value 

    $(this).before('<span>' + text + '</span>');// put a span with the alt value before the image 
}); 

Answer 2

首先，在文檔加載完成之前腳本正在執行。一旦DOM完全加載，使用ready執行回調。其次，您需要將文本放置在合理的位置（即不在img元素內）。這是一個選項：

jQuery(document).ready(function() { 
    jQuery(".set1").each(function() { 
     jQuery(this).before("<p>Some Text put here with Javascript..."); 
    }); 
}); 

一個簡單的演示：http://jsfiddle.net/cRRVX/

Answer 3

我敢肯定你的意思是 'ALT鍵' 或 '標題' attributes：

jQuery(this).before(jQuery('<img>').attr("alt", "Some Text put here with Javascript... ")); 

等

Answer 4

您需要1）等待文檔被加載，並且2）您需要將文本放入除span或div之類的圖像標籤以外的東西，以便在頁面中顯示，以及3）您c一個只是把內容直接進入參數爲.before()方法是這樣的：

jQuery(document).ready(function() { 
    jQuery('.set1').each(function() { 
     jQuery(this).before('<span>Some Text put here with Javascript... </span>'); 
    }); 
});