我试图创建一个HTML字符串，然后用额外的HTML和属性修改该HTML字符串，但它不起作用。我究竟做错了什么？Jquery - 将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前工作到一个变量，但是这使得我在做什么更难阅读。有没有其他的方式来做到这一点？
您对此表达$(thing).append(close);返回赋给变量thing这样的：
thing = $(thing).append(close);
否则变量将始终保持默认字符串作为<div class="thing"></div>价值。
希望这会有所帮助。
$(document).ready(function(){
$('body').on('click', 'button', function(){
var thing \t = '<div class="thing"></div>';
var close \t = '<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>的jquery的append方法追加到页面的DOM。如果你想使更多可读的尝试这个：
var thing = '<div class="thing">';
thing += '<a href="#" class="close">close</a>';
thing += '</div>';
$('.canvas').append(thing);
您可以创建新的DOM元素，而不是字符串。这样你可以很容易地追加。例如：
$(document).ready(function(){
\t $('body').on('click', 'button', function(){
var thing \t = jQuery('<div/>', {
class: 'thing'
});
var close \t = jQuery('<a/>', {
class: 'close',
href: '#',
text:'close'
}).appendTo(thing);
\t $('.canvas').append(thing);
return false;
\t });
});.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>尝试这种
$(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;
});
}）;
只是添加一些代码@Zakaria Acharki的回答，万一你想关闭创建的div：
$(document).ready(function(){
\t $('body').on('click', 'button', function(){
\t \t var thing \t = '<div class="thing"></div>';
\t \t var close \t = '<a href="#" class="close">close</a>';
\t \t thing = $(thing).append(close);
\t \t $('.canvas').append(thing);
\t \t return false;
\t });
$('body').on('click', '.close', function(){
\t $(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>问候
这是很容易的。你错误parseHTML方法。它将你的html字符串解析成jquery对象。
的解决方案是：
$(document).ready(function(){
\t $('body').on('click', 'button', function(){
\t \t var thing \t = '<div class="thing"></div>';
\t \t var close \t = '<a href="#" class="close">close</a>';
\t \t var html = $.parseHTML(thing);
$(html).append(close);
\t \t $('.canvas').append(html);
\t \t return false;
\t });
});.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>