Javascript OuterHTML：如何使用字符串文字？答案

【问题标题】：Javascript OuterHTML: How to work with a string literal?Javascript OuterHTML：如何使用字符串文字？
【发布时间】：2013-02-01 00:55:24
【问题描述】：

首先是一些 HTML 代码：

<div id="content_4" class="content" style="background:url(pic1.gif)"></div>
<div id="content_4_a" class="content" style="background:url(pic2.gif);
    display:none"></div>

这是JS代码：

function getOuterHMTL(element){
    return element.outerHTML;
}

function switchDisplayOuter(elementToHide, elementToShow, stringly){
    document.getElementsByName(elementToShow).outerHTML=stringly;
    document.getElementById(elementToHide).style.display="none";
    document.getElementsByName(elementToShow)[0].style.display="";
}

现在这段 HTML 代码可以工作了（当我点击它时，div 切换并且图片发生变化）：

<area shape="rect" coords="0,252,98,337" onMouseOver="switchDisplayOuter(
    'content_4', 'content_4_a', getOuterHMTL('content_4_a) )">

但不是这个：

<area shape="rect" coords="0,252,98,337" onMouseOver="switchDisplayOuter(
    'content_4', 'content_4_a', '<div id="content_4_a" class="content" 
    style="background:url(pic2.gif); display:none"></div>' )">

在 Firefox 中调试时它只会给我一个错误代码：

Error: SyntaxError: unterminated string literal
'<div id=

谁知道正确的代码而不使用函数 getOuterHMTL(element) 但使用“普通”字符串文字？

【问题讨论】：

标签： javascript html string outerhtml

【解决方案1】：

您需要将onMouseOver 属性值中的" 替换为\'：

<area shape="rect" coords="0,252,98,337" onMouseOver="switchDisplayOuter('content_4', 'content_4_a', '<div id=\'content_4_a\' class=\'content\'  style=\'background:url(pic2.gif); display:none\'></div>' )">

这是因为您的area 标签的onMouseOver 属性值包含在" 中。

【讨论】：

不起作用，\" 不适用于 HTML 属性。将它们更改为单引号，它将起作用。