javascript - Jquery - 将html字符串附加到变量中的html字符串

Question

我正在尝试创建一个 HTML 字符串，然后使用额外的 HTML 和属性修改该 HTML 字符串，但它不起作用。我做错了什么？

$(document).ready(function(){
    $('body').on('click', 'button', function(){
        var thing     = '<div class="thing"></div>';
        var close     = '<a href="#" class="close">close</a>';

        $(thing).append(close);

        $('.canvas').append(thing);

        return false;
    });
});

在将字符串附加到 DOM 之前，我确实通过将字符串组合到一个变量中来使其工作，但这使得我正在做的事情更难阅读。还有其他方法吗？

Here is a fiddle .

Answer 1

Updated fiddle .

您必须分配此表达式的返回值 $(thing).append(close);到变量 thing喜欢:

thing = $(thing).append(close);

否则变量将始终保存默认字符串 <div class="thing"></div>作为值(value)。

希望这对您有所帮助。

$(document).ready(function(){
  $('body').on('click', 'button', function(){
    var thing	  = '<div class="thing"></div>';
    var close	  = '<a href="#" class="close">close</a>';

    $('.canvas').append( $(thing).append(close) );

    return false;
  });
});

.thing {
  width: 50px;
  height: 50px;
  background: red;
}

.close {
  background: blue;
  color: white;
}

.canvas {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add Thing</button>
<div class="canvas"></div>