使用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/来使用图像的alt值。

$('.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

您需要1)等待文档加载，2)您需要将文本放入图像标记以外的内容中，以便在页面中显示，3)您可以直接将内容放入.before()方法的参数中，如下所示：

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