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

希望这有帮助。

＆＃13;

$(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;
  });
});

＆＃13;

.thing {
  width: 50px;
  height: 50px;
  background: red;
}

.close {
  background: blue;
  color: white;
}

.canvas {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}

＆＃13;

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

＆＃13;

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元素，而不是字符串。这样你就可以轻松追加。例如：

＆＃13;

$(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;
	});
});

＆＃13;

.thing {
  width: 50px;
  height: 50px;
  background: red;
}

.close {
  background: blue;
  color: white;
}

.canvas {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}

＆＃13;

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

＆＃13;

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

只需在@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>

此致

Answer 6

这很容易。你弄错了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>

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

6 个答案: