Как вставлять внутрь большие блоки информации?

Question

[partyzanx]

Вопрос по функции append. Почему вот такой скрипт работает

<script>
$( ".wo3" ).append( "<p>Test</p>" );
</script>

, а такой нет

<script>
$( ".wo3" ).append( "<span class="mb ch w">
<span class="w">我</span>
<span class="p1"> wǒ </span>
<span class="p2"> wɔ↝ </span>
<span class="p3"> wɔ3 </span> 
<img class="an" src="/Strokeorder/grammar_hsk1/3-1-0-9/wo3.gif">
<a class="sound" data-sound="grammar_hsk1/3-1-0-9/ch/wo3.mp3"></a>
</span>" );
</script>

Answer 1

[Денис Инешин]

Потому что у вас кавычки сломаны.

Есть 2 варианта решения
1. Вложенные кавычки должны быть другие (снаружи двойные - внутри одинарные и наоборот). Например так: append("<div class='test'></div>")
2. Вложенные кавычки должны быть заескейплены. Например так: append("<div class=\"test\"></div>")

Comments

[partyzanx]

<script>
 $('.wo3').append(`<span class="mb ch w">
<span class="w">我</span>
<span class="p1"> wǒ </span>
<span class="p2"> wɔ↝ </span>
<span class="p3"> wɔ3 </span> 
<img class="an" src="/Strokeorder/grammar_hsk1/3-1-0-9/wo3.gif">
<a class="sound" data-sound="grammar_hsk1/3-1-0-9/ch/wo3.mp3"></a>
</span>`);
</script>

Вот заработало. Нормально так?

[Денис Инешин]

partyzanx, обратные кавычки понимают только самые современные браузеры. Используйте обычные одинарные.

[partyzanx]

Денис Инешин, проблема в том, что такая кавычка как ’ присутствует в транскрипции ))))

[Денис Инешин]

partyzanx, заескейпите ее. Обратный слэш перед кавычкой вам поможет.

Answer 2

[Илья Герасимов]

Проблема в кавычках и переносах

$( ".wo3" ).append([
	'<span class="mb ch w">',
		'<span class="w">我</span>',
		'<span class="p1"> wǒ </span>',
		'<span class="p2"> wɔ↝ </span>',
		'<span class="p3"> wɔ3 </span>',
		'<img class="an" src="/Strokeorder/grammar_hsk1/3-1-0-9/wo3.gif">',
		'<a class="sound" data-sound="grammar_hsk1/3-1-0-9/ch/wo3.mp3"></a>',
	'</span>',
].join(""));

или

$( ".wo3" ).append( '<span class="mb ch w">\
	<span class="w">我</span>\
	<span class="p1"> wǒ </span>\
	<span class="p2"> wɔ↝ </span>\
	<span class="p3"> wɔ3 </span>\
	<img class="an" src="/Strokeorder/grammar_hsk1/3-1-0-9/wo3.gif">\
	<a class="sound" data-sound="grammar_hsk1/3-1-0-9/ch/wo3.mp3"></a>\
</span>' );

Comments

[Денис]

Шаблонные строки

[Илья Герасимов]

Денис, Сам я не использую такого рода "шаблонизацию" и не было еще необходимости сбора многострочной информации, то что выше написал скорее из того что видел, как другие делают. Но все равно спас за ссылку, узнал что `` учитывает переносы.