Javascript：添加 HTML 代码，包括 img src 和 href's

Posted 2023-04-13

【中文标题】Javascript：添加 HTML 代码，包括 img src 和 href\'s

【英文标题】：Javascript: Prepend with HTML code including img src and href'sJavascript：添加 HTML 代码，包括 img src 和 href's

【发布时间】：2015-10-04 22:58:36

【问题描述】：

尝试向 SlickNav 菜单添加一些前置代码，虽然基本的 html 可以工作，但一旦我添加了诸如 img 和 href 之类的内容，代码就会失败。我知道这是不正确的，但我想知道这里有什么用：

jQuery('.slicknav_menu').prepend('<div class=\"logo\"><a href=\"https://example.com/\" rel=\"home\"><img src=\"https://example.com/images/logo-round.svg\" alt=\"My Site\" onerror=\"this.onerror=null; this.src='https://example.com/images/logo-round.png'\"></a></div>');

我知道这会奏效：

jQuery('.slicknav_menu').prepend('<div class=\"logo\">LOGO</div>');

但另一个更高级。那么我怎样才能使它工作以显示 svg（或 png）图像？

【问题讨论】：

看语法高亮...你是在转义错误的引号，而不是转义需要转义的单引号

【参考方案1】：

经过大量的反复试验，我终于找到了似乎可以工作的代码。这会显示所有内容，并且链接正确：

jQuery('.slicknav_menu').prepend(\"<div class=\\\"site-title\\\"><a href=\\\"https://thecleverroot.com/\\\" rel=\\\"home\\\"><img src=\\\"https://thecleverroot.com/wp-content/themes/clever-root/images/logo.svg\\\" alt=\\\"The Clever Root\\\" onerror=\'this.onerror=null; this.src=\\\"https://thecleverroot.com/themes/clever-root/images/logo-round.png\\\"\'></a></div>\"); 

【参考方案2】：

只是为了回应@charlietfl 留下的评论，语法荧光笔是一个好朋友。总是很难手动完成，但请务必跟踪单引号和双引号转义。

【参考方案3】：

我认为正确的方法是

jQuery('.slicknav_menu').prepend('<div class="logo"><a href="https://example.com/" rel="home"><img src="https://example.com/images/logo-round.svg"  onerror="this.onerror=null; this.src=\'https://example.com/images/logo-round.png\'"></a></div>');

如果以简单引号开头，则需要对简单引号进行转义。

例如：

$('.slicknav_menu').prepend('<div class="logo" id=\'id_exemple\'>Teste</div>');

【讨论】：

你的方法不起作用。尝试上述方法时出现语法错误。双引号是问题所在。你需要它们来获得 href 和 img src 属性。

我认为问题在于我正在直接调用 example.com 而正是那些斜线导致事情变得一团糟。