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

Question

首先是一些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（元素），但“普通”字符串文字正确的代码？

Answer 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属性的值括与"。