HTML中单引号的妙用

最新推荐文章于 2022-09-20 11:27:05 发布

原创最新推荐文章于 2022-09-20 11:27:05 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #button #function #div #测试

WEB 同时被 2 个专栏收录

5 篇文章

订阅专栏

DOM

1 篇文章

订阅专栏

之前在做网页开发时，被以下这一个微不足道的小问题把头搞大了，具体问题已经做了处理，现把问题所在整理如下：

HTML文件，quateQuestion.html

<html>
<head>
<title>Js中单引号值得注意的地方</title>
</head>
<body>
<script type="text/javascript">
    var testCase = 2;
    function clickMe() {
        var obj = document.getElementById("nav");
        var newDiv = document.createElement("div");
        var helloworld='helloworld';
        newDiv.id = "newDiv";
        switch (testCase)
        {
        case 1:
            newDiv.innerHTML = "<p><input type=text value='hello world' onclick=alert("+helloworld+") >";
            //情况一，什么也不加
            break;
        case 2:
            newDiv.innerHTML = "<p><input type=text value='hello world' onclick=alert('"+helloworld+"') >";
            //情况二，为字符串加上单引号                     *****正确方法 *****
            break;
        case 3:
            newDiv.innerHTML = "<p><input type=text value='hello world' onclick=alert(/'"+helloworld+"/') >";
            //情况三，来点转义吧，为字符串加上转义＝    *****正确方法 *****
            break;
        case 4:
            newDiv.innerHTML = "<p><input type=text value='hello world' onclick='alert('"+helloworld+"')' >";
            //情况四，试图为方法及字符串都加上单引号
            break;
        case 5:
            newDiv.innerHTML = "<p><input type=text value='hello world' onclick=/'alert('"+helloworld+")/' >";
            //情况五，试图为方法加上转义字符，而字符串加上单引号
            break;
        case 6:
            newDiv.innerHTML = "<p><input type=text value='hello world' onc lick=/'alert(/'"+helloworld+"/')/' >";
            //情况六，试都添加转义字符
            break;
        case 7:
            newDiv.innerHTML = '<p><input type=text value="hello world" onclick=alert("'+helloworld+'" >';
            //情况七，试图在单引号中为字符串使用双引号
            break;
        case 8:
            newDiv.innerHTML = '<p><input type=text value="hello world" onclick=alert(/"'+helloworld+'/" >';
            //情况七，试图在单引号中为字符串使用双引号,并为双引号转义
            break;
        default:
        obj.appendChild(newDiv);
    }
</script>
<input type=button value=buttonMe onclick=clickMe()>
<div id=nav></div>
</body>
</html>