无法使用 jquery 附加图像

Question

我目前有一个代码可以使用 jquery 基于页面的 url 添加 class。但是我想将图像添加到 div 而不是只添加 class。我对 java-script 的精通程度不高，但我认为可能有一个非常简单的解决方案。无效的代码是

if (window.location.href.indexOf('Locate_an_eyecare_professional') > -1) {
        var img = document.createElement("img");
        img.src = '~/Content/Images/Template 5A Filmstrip.jpg" />';



    }

我现在不想使用的代码是

if (window.location.href.indexOf('Locate_an_eyecare_professional') > -1) {
        var $body = $('body');

        $body.addClass('campaign');


    }

如何将我所知道的有用的东西应用到我想要开始工作的东西上？

Answer 1

您可以按以下方式使用 jQuery .append() 函数向任何元素添加 <img>：

var imageToAppend = '<img src="http://example.com/img.png" height="200" width="200"/>';
$('#myElementId').append(imageToAppend); //This will append you HTML to the div with id "myElementId"

您可以在此处阅读更多相关信息：http://api.jquery.com/append/

编码愉快！ =]

Answer 2

您应该在需要附加（前置）图像元素的地方使用该元素，这样代码将类似于：

$("base element selector").append(img);

但您需要考虑到从浏览器的角度来看图像源的地址可能不正确 - 考虑到该页面托管在应用程序中，例如 http://server.com//applicationgroup/applicationroot/Content/Images/.....jpg 可能不会指向 ~/Content/Images/.....jpg 你更需要在服务器端将地址转换为完整的服务器地址。

Answer 3

如果出于某种原因您不想在这部分使用 jQuery，您只需将该元素附加到 html 文档的正文（或任何您想要的位置）结束）像这样：

Javascript代码

if (window.location.href.indexOf('Locate_an_eyecare_professional') > -1) {
  var body = document.getElementsByTagName("BODY")[0];
  var img = document.createElement("img");
  img.className = 'img-responsive'
  img.src = '~/Content/Images/Template 5A Filmstrip.jpg';
  body.appendChild(img);
}

Answer 4

在我的例子中，我只需要从以下位置删除“~”：

<img src="~/assets/icons/ic_chevron2.svg" class="rot-90" />

导致：

<img src="/assets/icons/ic_chevron2.svg" class="rot-90" />

无法使用 jquery 附加图像

Cannot append image with jquery

javascript

jquery

jquery-selectors

Javascript代码