如何使用JavaScript編寫未封閉的HTML語句

Question

在為項目編寫一些JavaScript時，我遇到了一個問題。 我需要創建幾個Div元素，克隆一個選擇列表，然后關閉Divs。 使用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>

當由瀏覽器執行此操作時，第一個innerHTML分配的斜體和粗體將自動為我關閉。 我該怎么做才能使其保持打開狀態？

Answer 1

在完成構建HTML字符串之前，請不要分配給innerHTML。 使用一個臨時變量：

var h = '';
h += '<i>This should be <b>bold ';
h += '</b> and this should not</i>';
myDiv.innerHTML = h;

或在一個表達式中分配字符串：

myDiv.innerHTML = 
    '<i>This should be <b>bold ' +
    '</b> and this should not</i>';

Answer 2

您的內部html無效：

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

Answer 3

您似乎在使用標簽時出錯，您有兩次</b> ，第一個b標簽應為<b>

myDiv.innerHTML = myDiv.innerHTML + '<i>This should be </b>bold ';
myDiv.innerHTML = myDiv.innerHTML + '</b> and this should not</i>';

When this is executed by a browser, the italic and bold from the first innerHTML assignment are automatically "closed" for me. What can I do to keep them open?

我建議您先將它們放在變量中，然后再更新innerHTML

 var myDiv = document.getElementById("myDiv"); var htmlstring = '<i>This should be <b>bold '; htmlstring += '</b> and this should not</i>'; myDiv.innerHTML += htmlstring;

 <body> <div id="myDiv"></div> </body>

Answer 4

標簽格式不正確

 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>';

 <div id="myDiv"></div>

Answer 5

由於您似乎將appendChild用於其他用途，並且需要在文檔中插入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'});

請注意，有一些怪癖需要處理，因此請做一些研究和徹底測試。

如何使用JavaScript編寫未封閉的HTML語句

問題描述

5 個解決方案

解決方案1
4 2014-10-07 05:11:19

解決方案2
2

解決方案3
0 2014-10-07 05:09:49

解決方案4
0 2014-10-07 05:10:08

解決方案5
0 已采納 2014-10-07 06:19:23

如何使用JavaScript編寫未封閉的HTML語句

問題描述

5 個解決方案

解決方案1 4 2014-10-07 05:11:19

解決方案2 2

解決方案3 0 2014-10-07 05:09:49

解決方案4 0 2014-10-07 05:10:08

解決方案5 0 已采納 2014-10-07 06:19:23

解決方案1
4 2014-10-07 05:11:19

解決方案2
2

解決方案3
0 2014-10-07 05:09:49

解決方案4
0 2014-10-07 05:10:08

解決方案5
0 已采納 2014-10-07 06:19:23