Question

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

查看我的JSFiddle

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

HTML实体（&entity; - 格式化的字符串）令人震惊，对于HTML来说。

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

在这种情况下，非中断空格，即\xA0

然而，将NBSP链接在一起以人为地创造空间是非常的错误做法。你应该使用边距，填充，定位...任何东西，只要它是CSS。间距是演示文稿的一部分，演示文稿是CSS的工作。

为了完整性，您可以使用普通空格（" "），前提是您将容器的CSS设置为包含white-space: pre-wrap以使空白显着。

Answer 2

如前所述， 是 HTML 实体。您正在尝试填充文本节点，而不是HTML。

因此，填补＆＃34;非破坏空白＆＃34; （ ）进入文本节点，可以使用其unicode字符代码：

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

Answer 3

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

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

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

Answer 4

是的，文本节点没有.innerHTML属性。只有HTMLElements这样做。所以，这将有效：

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

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

4 个答案: