为什么我无法插入仅设置了零宽度空白的文本节点？

Question

我正在尝试使用 JS 插入空白文本节点，但它根本不起作用。 innerHtml 属性是否因 TextNode 而被忽略？

insertWhitespace = function() {

  var contentEditable = document.getElementById("txt");
  var element = document.getElementById("annyoing-html");

  var textNodeLeft = document.createTextNode("");
  var textNodeRight = document.createTextNode("");

  textNodeLeft.innerHtml = "&#8203;";  
  textNodeRight.innerHtml = "&#8203;";

  contentEditable.insertBefore(textNodeLeft, element);

  if(element.nextSibling != null) {     
    contentEditable.insertBefore(textNodeRight, element.nextSibling);  
  } else {
    element.appendChild(textNodeRight);
  }
};

我实际上打算插入零个空白字符，但无论如何它都无法正常工作。

如何插入这样的文本节点？

Answer 1

是的，文本节点没有 .innerHTML 属性。只有 HTMLElements 可以。所以，这将起作用：

var textNodeLeft = document.createElement("span");
textNodeLeft.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;";

Answer 2

HTML 实体（&entity; 格式的字符串）令人震惊地用于 HTML.

对于 JavaScript，您需要使用 JavaScript 转义序列。

在这种情况下，不间断space，即\xA0

但是，将 NBSP 链接在一起以人为创建 space 是非常不好的做法。您应该使用边距、填充、定位...任何东西，只要它是 CSS。间距是表示的一部分，而表示是 CSS 的工作。

为了完整起见，您可以使用正常的 spaces (" ")，前提是您将容器的 CSS 设置为包含 white-space: pre-wrap 以使白色 space 意义重大。

Answer 3

如前所述，  是一个 HTML 实体。您正在尝试填充 text 节点，而不是 HTML.

因此，要将一个"non-breaking whitespace"( )填充到一个文本节点中，可以使用它的unicode字符编码：

var textNode = document.createTextNode("\xA0");
// or
var textNode2 = document.createTextNode("");
textNode2.data = "\xA0";   // or
textNode2.textContent = "\xA0";

Answer 4

文本节点没有 .innerHTML 属性（注意：注意大小写）

最简单的解决方案是在创建元素时将正确的内容指定为 Unicode 文字：

var textNodeLeft = document.createTextNode("\u200b");
var textNodeRight = document.createTextNode("\u200b");

为什么我无法插入仅设置了零宽度空白的文本节点？

Why am I not able to insert text nodes which only have zero width whitespaces set?

html

javascript

textnode