Добавление HTML кода после элемента
 

Привет. Есть такой код меню от Joomla

<div class="moduletable_u_menu">
	<ul class="nav menu">
		<li class="deeper parent"><a href="#">HOME</a>
			<ul class="nav-child unstyled small">
				<li><a href="#">Sub-Menu 1</a></li>
				<li><a href="#">Sub-Menu 2</a></li>
				<li><a href="#">Sub-Menu 3</a></li>
			</ul>
		</li>
		<li><a  href="#">ABOUT</a></li>
		<li class="deeper parent"><a  href="#">1</a>
		</li>
		<li class="current active"><a  href="#">BLOG</a></li>
		<li><a  href="#">CONTACT</a></li>
	</ul>
</div>

Хочу после DIV блока с классом moduletable_u_menu поставить такой HTML код

<a id="touch-menu" class="mobile-menu" href="#">Menu</a>

Делаю так, но что-то не получается. jquery подключен. Что не так делаю?

$(document).ready(function(){ 

	$(".moduletable_u_menu").after("<a id="touch-menu" class="mobile-menu" href="#">Menu</a>");

	var touch 	= $('#touch-menu');
	var menu 	= $('.menu');

	$(touch).on('click', function(e) {
		e.preventDefault();
		menu.slideToggle();
	});
	
	$(window).resize(function(){
		var w = $(window).width();
		if(w > 767 && menu.is(':hidden')) {
			menu.removeAttr('style');
		}
	});

});

Обычный текст добавляется, а код нет. Может какие-то символы дополнительно экранировать нужно?

Получилось. Без кавычек написал и заработало.

$(".moduletable_u_menu").after("<a id=touch-menu class=mobile-menu href=#>Menu</a>");

От беда, а в одинарные просто нельзя было?

$(".moduletable_u_menu").after('<a id="touch-menu" class="mobile-menu" href="#">Menu</a>');

Гаджи, ну логично, что кавычки надо было экранировать. Экранируются обратным слэшем: str="My string with quotes: \"\"\""

Или одинарные поставить, да.