如何使用JavaScript编写未关闭的HTML语句_Javascript_Html

如何使用JavaScript编写未关闭的HTML语句

javascript html

如何使用JavaScript编写未关闭的HTML语句,javascript,html,Javascript,Html,在为项目编写JavaScript时，我遇到了一个问题。我需要创建几个Div元素，克隆一个选择列表，然后关闭Div。使用innerHTML的副作用是自动关闭任何挂起的“打开的”HTML语句。下面是一个例子： <html><head></head><body> <div id="myDiv"></div> <script> var myDiv = document.getElementById("myDiv"); m

在为项目编写JavaScript时，我遇到了一个问题。我需要创建几个Div元素，克隆一个选择列表，然后关闭Div。使用innerHTML的副作用是自动关闭任何挂起的“打开的”HTML语句。下面是一个例子：

<html><head></head><body>
<div id="myDiv"></div>
<script>
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = myDiv.innerHTML + '<i>This should be <b>bold ';
myDiv.innerHTML = myDiv.innerHTML + '</b> and this should not</i>';
</script>
</body></html>


var myDiv=document.getElementById（“myDiv”）；
myDiv.innerHTML=myDiv.innerHTML+“这应该是粗体的”；
myDiv.innerHTML=myDiv.innerHTML+'这不应该'；

当浏览器执行此操作时，第一个innerHTML赋值中的斜体和粗体将自动“关闭”。如何使它们保持打开状态？

您的内部html无效：

'<i>This should be </b>bold '
--------------------^ it is opening tag not closing, remove the /

“这应该是粗体的”
--------------------^如果是开始标记而不是结束标记，请移除/

您的内部html无效：

'<i>This should be </b>bold '
--------------------^ it is opening tag not closing, remove the /

“这应该是粗体的”
--------------------^如果是开始标记而不是结束标记，请移除/

您似乎在使用标记时出错，您有两个

第一个

标记应该是

我建议在更新

innerHTML

var myDiv=document.getElementById（“myDiv”）；
var htmlstring='这应该是粗体'；
htmlstring+='这不应该'；
myDiv.innerHTML+=htmlstring
您似乎在使用标记时出错，您有两个
第一个b
标记应该是

我建议在更新innerHTML


var myDiv=document.getElementById（“myDiv”）；
var htmlstring='这应该是粗体'；
htmlstring+='这不应该'；
myDiv.innerHTML+=htmlstring
标签格式不正确
var myDiv=document.getElementById（“myDiv”）；
myDiv.innerHTML=myDiv.innerHTML+“这应该是粗体的”；
myDiv.innerHTML=myDiv.innerHTML+'这不应该'
标签格式不正确
var myDiv=document.getElementById（“myDiv”）；
myDiv.innerHTML=myDiv.innerHTML+“这应该是粗体的”；
myDiv.innerHTML=myDiv.innerHTML+'这不应该'
在完成HTML字符串的构建之前，不要分配给innerHTML。或者使用临时变量：
var h = '';
h += '<i>This should be <b>bold ';
h += '</b> and this should not</i>';
myDiv.innerHTML = h;

var h=''；
h+='这应该是粗体'；
h+='这不应该'；
myDiv.innerHTML=h；

或在一个表达式中指定字符串：
myDiv.innerHTML = 
    '<i>This should be <b>bold ' +
    '</b> and this should not</i>';

myDiv.innerHTML=
“这应该是大胆的”+
‘这不应该’；
在完成构建HTML字符串之前，不要分配给innerHTML。或者使用临时变量：
var h = '';
h += '<i>This should be <b>bold ';
h += '</b> and this should not</i>';
myDiv.innerHTML = h;

var h=''；
h+='这应该是粗体'；
h+='这不应该'；
myDiv.innerHTML=h；

或在一个表达式中指定字符串：
myDiv.innerHTML = 
    '<i>This should be <b>bold ' +
    '</b> and this should not</i>';

myDiv.innerHTML=
“这应该是大胆的”+
‘这不应该’；
由于您似乎正在使用AppDebug做其他事情，需要将DOM对象插入到文档中，所以您应该考虑类似：
var myDiv, span;
myDiv = document.getElementById("myDiv");

span = document.createElement('span');
span.className = 'boldClass';
span.appendChild(document.createTextNode('This should be bold'));
div.appendChild(span);

// Add other DOM objects here

span = document.createElement('span');
span.className = 'notBoldClass';
span.appendChild(document.createTextNode(' and this should not'));
div.appendChild(span);

您可以使用一个函数根据传递的参数返回DOM元素，例如
function makeElement(tagName, props) {
  var el = document.createElement(tagName);
  for (var p in props) {
    if (props.hasOwnProperty(p)) {
      el[p] = props[p];
    }
  }
  return el;
}

然后你可以做如下事情：
span = makeElement('span', {className: 'boldClass'});

注意，有一些怪癖要处理，所以做一些研究和测试。
 因为你似乎在使用AppDebug做其他事情，需要将DOM对象插入到文档中，你应该考虑一些类似的事情：
var myDiv, span;
myDiv = document.getElementById("myDiv");

span = document.createElement('span');
span.className = 'boldClass';
span.appendChild(document.createTextNode('This should be bold'));
div.appendChild(span);

// Add other DOM objects here

span = document.createElement('span');
span.className = 'notBoldClass';
span.appendChild(document.createTextNode(' and this should not'));
div.appendChild(span);

您可以使用一个函数根据传递的参数返回DOM元素，例如
function makeElement(tagName, props) {
  var el = document.createElement(tagName);
  for (var p in props) {
    if (props.hasOwnProperty(p)) {
      el[p] = props[p];
    }
  }
  return el;
}

然后你可以做如下事情：
span = makeElement('span', {className: 'boldClass'});

请注意，有一些怪癖需要处理，所以要做一些彻底的研究和测试。
有些人可能不同意，但我想说的是，您可以随时为html代码检查语法highlighter IDE/tool。输入错误是人类的天性：）一旦你在dom中插入了无效的标记，dom就会修复它，添加msising close标记，这样当你添加closer时，它已经被关闭，并且你已经在关闭后添加了。有些人可能不同意，但我会说，对于html代码，您可以始终使用语法highlighter IDE/tool进行检查。输入错误是人类的天性：）一旦你在dom中插入了无效的标记，dom就会修复它，添加msising close标记，这样当你添加closer时，它已经被关闭了，并且你在关闭后一直在添加。我不明白这为什么会被否决，我想其他人可能会有更好的答案？请在您否决投票之前指出我的错误。我没有否决投票，但问题的实质是innerHTML
是否可以用于插入本地无效的HTML序列，而它不能。简单地改变问题以使单个HTML序列有效并不能真正回答根本的问题。被否决的人应该清楚这会带来多大的伤害，并抵制在向下箭头上单击的诱惑。你没有抓住要点。我简化了我的示例，以便演示一个意想不到的结果。@DavidPencer我更新了我的答案，请检查代码段。我不明白为什么这一点被否决，我想其他人可能会有更好的答案？请在您否决投票之前指出我的错误。我没有否决投票，但问题的实质是innerHTML
是否可以用于插入本地无效的HTML序列，而它不能。简单地改变问题以使单个HTML序列有效并不能真正回答根本的问题。被否决的人应该清楚这会带来多大的伤害，并抵制在向下箭头上单击的诱惑。你没有抓住要点。我简化了我的示例，以便演示一个意想不到的结果。@DavidPencer我更新了我的答案，请检查代码片段。也许我把问题简化得太过分了。我试图展示我收到的意想不到的结果。也许我把我的问题简化得太过分了。我试图展示意想不到的结果