我的 .html() 语法有什么问题？答案

【问题标题】：What's wrong with my .html() syntax?我的 .html() 语法有什么问题？
【发布时间】：2012-12-11 13:50:43
【问题描述】：

当我输入以下代码时：

$('.whatever').html("LOL");

它有效。但在我正在构建的网站中，我需要添加的不仅仅是一个字符串。

这是我想补充的：

<div class="pic"><img class="left" src="img/happy-man.jpg"/ ></div>
<div class="pic"><img class="happy" src="img/happy-woman.jpg"/ ></div>
<div class="pic"><img class="right" src="img/happy-celeb.jpg"/ ></div>

但是当我将上面的 HTML 代码放入 html() 函数时，什么也没有发生。我想知道我在语法方面犯了什么明显的错误。欣赏！

【问题讨论】：

可能需要转义引号。向我们展示您输入的具体内容
你在转义引号吗？如果你在做 .html("

请再粘贴几行，显示您如何存储上述 HTML 字符串以及如何调用 .html() 函数。
多行字符串在 javascript 中并不容易。请参阅此stackoverflow.com/questions/805107/… 以了解如何使其适合您。

【解决方案1】：

$('.whatever').html('<div class="pic"><img class="left" src="img/happy-man.jpg"/ ></div><div class="pic"><img class="happy" src="img/happy-woman.jpg"/ ></div><div class="pic"><img class="right" src="img/happy-celeb.jpg"/ ></div>')

下面的代码可以让你替换div的html内容

或者你只是做一个字符串

text= '<div class="pic"><img class="left" src="img/happy-man.jpg"/ ></div>'+'<div class="pic"><img class="happy" src="img/happy-woman.jpg"/ ></div>'
$('.whatever').html(text)

【讨论】：

【解决方案2】：

试试单引号$('.whatever').html('LOL');

http://jsfiddle.net/83DSu/1/

【讨论】：

【解决方案3】：

如果你逃得正确，它可以完美地工作

Demo 具有三个不同的选项

var html1 ="<div class=\"pic\"><img class=\"left\" src=\"img/happy-man.jpg\"/ >" + 
           "</div><div class=\"pic\"><img class=\"happy\" src=\"img/happy-woman.jpg\"/ ></div>" +
           "<div class=\"pic\"><img class=\"right\" src=\"img/happy-celeb.jpg\"/ ></div>";

$('#whatever').html(html1);

var html2 = "<div class='pic'><img class='left' src='img/happy-man.jpg'/ ></div>" + 
            "<div class='pic'><img class='happy' src='img/happy-woman.jpg'/ ></div>" + 
            "<div class='pic'><img class='right' src='img/happy-celeb.jpg'/ ></div>";

$('#whatever2').html(html2);

var html3 = '<div class="pic"><img class="left" src="img/happy-man.jpg"/ ></div>' +
            '<div class="pic"><img class="happy" src="img/happy-woman.jpg"/ ></div>' +
            '<div class="pic"><img class="right" src="img/happy-celeb.jpg"/ ></div>';

$('#whatever3').html(html3);

【讨论】：

【解决方案4】：

单双引号可能有问题

$('.whatever').html(
   '<div class="pic"><img class="left" src="img/happy-man.jpg"/ ></div>'+
   '<div class="pic"><img class="happy" src="img/happy-woman.jpg"/ ></div>'+
   '<div class="pic"><img class="right" src="img/happy-celeb.jpg"/ ></div>'
);

http://jsfiddle.net/83DSu/

【讨论】：

它工作正常。只是您没有为图片指定正确的链接。

【解决方案5】：

另一种方法是：

var imgList = [
        ["img/happy-man.jpg","left"]
        ,["img/happy-woman.jpg","happy"]
        ,["img/happy-celeb.jpg","right"]
    ], cur=0,
    whatever = $('#whatever');
    whatever.html("");

$.each(imgList,function(){
    console.log(imgList[cur][1]);
    whatever
        .append( $("<div />")
                .addClass("pic")
                .html( $("<img />")
                      .addClass(imgList[cur][1])
                      .attr("src",imgList[cur][0])
                    )
              );
        cur++;
});

它看起来更复杂，但它可以让您更快地控制 HTML 并将所有链接放在一个位置。

http://jsfiddle.net/daCrosby/Fwwd3/

【讨论】：