Javascript OuterHTML:如何使用字符串文字?

时间:2013-02-01 00:55:25

标签: javascript html string outerhtml

首先是一些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)但使用“plain”字符串文字的情况下知道正确的代码吗?

1 个答案:

答案 0 :(得分:2)

您需要将"属性值中的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属性的值附带"