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> 作为值。

希望这会有所帮助。

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

Answer 2

jquery 的 append 方法追加到页面的 DOM。如果你想让更多的可读性试试这个：

var thing = '<div class="thing">';
thing    += '<a href="#" class="close">close</a>';
thing    += '</div>';

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

Answer 3

您可以创建新的 DOM 元素，而不是字符串。这样您就可以轻松追加。示例：

$(document).ready(function(){
	$('body').on('click', 'button', function(){

        var thing	  =  jQuery('<div/>', {
            class: 'thing'
        });

        var close	  = jQuery('<a/>', {
            class: 'close',
            href: '#',
            text:'close'
        }).appendTo(thing);

    
	$('.canvas').append(thing);
            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>

Answer 4

试试这个

$(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);
    $('.thing').append(close);
    return false;
});

});

Answer 5

这太容易了。你弄错了parseHTML 方法。它将您的 html 字符串解析为 jquery 对象。

解决办法是：

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

		var html = $.parseHTML(thing);
    $(html).append(close);
    
		$('.canvas').append(html);
    
		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>

Answer 6

只需在@Zakaria Acharki 的答案中添加一些代码，以防万一您想关闭创建的 div：

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

		thing = $(thing).append(close);
    
		$('.canvas').append(thing);
    
		return false;
	});

$('body').on('click', '.close', function(){
	$(this).parent().remove();
});
});

.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>

问候