使用JavaScript插入文本

我正在尝试使用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>

---

有什么想法吗？

首先，您的脚本在文档加载完成之前执行。使用ready在DOM完全加载后执行回调。其次，您需要将文本放在有意义的地方，即不在img元素内。这是一种选择：

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

---

一个简单的演示：

我很确定你指的是“alt”或“title”：

---

等等。

您需要1等待文档加载，2您需要将文本放入图像标记以外的内容中，如span或div，以便在页面中显示，3您只需将内容直接放入该方法的参数中即可。在这样的方法之前：

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

---

要将文本置于图像之前吗

或者使用图像的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
});

---

如果我读对了，你是想把文字放在图像标签上。。。这就是你想要做的吗？我是唯一一个缺少CSS部分的人吗？@melihcelik:这是jQuery，不是真正的CSS。像这样标记和编辑。@melihcelik和他也可能是一个她……我是一个她。我正试图让文本显示在图像上方，但它是否由于位于图像标记内而无法正确显示？更新了我的答案，以选择图像的alt并在图像之前显示它

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

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