innerHTML关闭标签 [英] innerHTML closes tags

问题描述

我具有以下开关结构:

switch (ratio) {
  case "16:9":
    imgContainer.innerHTML = '<img src="images/test-rata-de-aspect.jpg">'       
    break       
  case "4:3":
    imgContainer.innerHTML = '<img src="images/schita-usi-2.jpg">'
    break
  default:
    imgContainer.innerHTML = '<img src="images/schita-usi-1.jpg" usemap="#schita-usi-1">'
    imgContainer.innerHTML += '<map name="schita-usi-1">'
    imgContainer.innerHTML += '<area shape="rect" coords="191,108,577,973" href="test.html"  alt="" title="">'  
    imgContainer.innerHTML += '</map>'
    break    
}   

我们需要查看的是 default 案例.

What we need to look at is the default case.

代码工作正常，但是< map> 标记在包含< area> 标记之前已关闭.

The code works fine but the <map> tag is closed before containing the <area> tags.

我做了一些研究，看来这可能是由于HTML格式不正确引起的.还尝试创建一个包含代码的变量，然后像这样调用该变量:

I did some research and it seems that it might be caused by badly formatted HTML. Also tried to create a variable that contains the code and then calling that variable like this:

var htmlcode = '<img src="images/schita-usi-1.jpg" usemap="#schita-usi-1">';
var htmlcode += '<map name="schita-usi-1">';
var htmlcode += '<area shape="rect" coords="191,108,577,973" href="test.html"  alt="" title="">';
var htmlcode += '</map>';
imgContainer.innerHTML = htmlcode

此变体在控制台中生成错误:SyntaxError:missing;这行上的before语句: var htmlcode + ='< map name ="schita-usi-1">'; .

This variant generates an error in the console: SyntaxError: missing ; before statement on this line: var htmlcode += '<map name="schita-usi-1">';.

关于JavaScript，我是个新手.我没有在代码中看到任何HTML错误，这是什么问题?是什么原因导致< map> 标记在这种情况下自动关闭?

I'm pretty novice when it comes to JavaScript. I don't see any HTML errors in the code, what would be the problem here? What causes the <map> tag to autoclose in this case?

让我知道是否需要提供更多详细信息.

Let me know if I need to provide further details.

推荐答案

您在正确的道路上.首先发生这种现象的原因是，一旦在页面上设置了实时DOM元素的HTML，浏览器就会尝试为您纠正"任何损坏的HTML.这包括结束标记.

You're on the right path. The reason this behavior was happening in the first place is that once you set that HTML of the live DOM element on the page, the browser is going to try to "correct" any broken HTML for you. This includes closing tags.

如您所愿，解决方案是将所有字符串放在一起 first 和 then ，将结果设置为元素的HTML.但是在尝试中，至少有一个问题是，您试图一遍又一遍地重新声明相同的变量.

As you intend, the solution is to put all of your strings together first and then set the result to the HTML of the element. But in your attempt at least one problem is that you're trying to re-declare the same variable over and over.

您实际上并不需要该变量.您只需将所有字符串都构建在一行代码上，然后将其设置为HTML.像这样简单的事情:

You don't really need the variable. You can simply build the string all on one line of code and set it to the HTML. Something as simple as this:

imgContainer.innerHTML = '<img src="images/schita-usi-1.jpg" usemap="#schita-usi-1">'
                       + '<map name="schita-usi-1">'
                       + '<area shape="rect" coords="191,108,577,973" href="test.html"  alt="" title="">'  
                       + '</map>';

这为您提供了代码中所需的多行格式(我为便于阅读而假定)，但是将整个操作作为一个单独的任务执行.首先会评估 = 右边的所有内容(所有行"，即使直到分号之前都是代码行")，然后将结果赋值给 = 的左侧.

That gives you the multi-line formatting you want in the code (I assume for readability), but performs the entire operation as a single assignment. Everything to the right of the = will be evaluated first (all of the "lines", even though until the semi-colon it's all one "line of code"), and then the result is assigned to the left of the =.

这篇关于innerHTML关闭标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！