如何在 document.createElement("span"); 之后将文本添加到 span 中？答案

【问题标题】：How to add text into span after document.createElement("span");?如何在 document.createElement("span"); 之后将文本添加到 span 中？
【发布时间】：2014-10-24 06:34:24
【问题描述】：

我正在尝试使用函数 .text() 将文本写入元素范围，但出现此错误 UncaughtTypeError: undefined is not a function，我也试过函数append()、innerHtml()、createTextNode()都没有成功。

我做错了什么？

var closeSpan = document.createElement("span");
closeSpan.setAttribute("class","sr-only");
closeSpan.text("Close"); //UncaughtTypeError: undefined is not a function

或

var closeSpan = document.createElement("span");
closeSpan.setAttribute("class","sr-only");
closeSpan.append("Close"); //UncaughtTypeError: undefined is not a function

【问题讨论】：

.text() 是 jQuery 的函数。使用closeSpan.textContent = "Close";不知道什么是DOM版本的jQuery的.append()
innerHTML / innerText / textContent 是一个属性，而不是一个函数 (span.innerHTML = 'Close')。 createTextNode 只创建了一个文本节点，你还需要将它添加到元素中（span.appendChild(document.createTextNode('Close'))）。
“我做错了什么？” - 你在混淆 jQuery 和 DOM 方法。你能解释一下为什么你首先打电话给document.createElement()吗？（也看看documentation for DOM Node objects，那里既不存在.text() 也不存在.append()。）

标签： javascript jquery dom

【解决方案1】：

由于您从纯 DOM 代码开始，我建议您继续使用纯 DOM 代码：

var closeSpan = document.createElement("span");
closeSpan.setAttribute("class","sr-only");
closeSpan.textContent = "Close";

换句话说，只需将textContent 设置为您想要的值。

如果与 IE 8 或更早版本的兼容性对您很重要，请注意 textContent 不适用于那些旧版浏览器。对于那些较旧的，您必须使用innerText（适用于IE 8，但不属于任何标准）或innerHTML。有关这些字段之间差异的讨论，请参阅 textContent（我在上面链接到）上的 MDN 页面。

【讨论】：

【解决方案2】：

如果您不想使用 jquery，您可以使用 closeSpan.appendChild 和 document.createTextNode，如下所示：

var closeSpan = document.createElement("span");
closeSpan.setAttribute("class","sr-only");
closeSpan.appendChild(document.createTextNode("Close"));

这种方法最大限度地提高了跨浏览器的兼容性。它适用于所有浏览器，包括旧版本的 IE。

如果您确实想使用 jquery，您可以在一行中完成：

var closeSpan = $("<span></span>").addClass("sr-only").text("Close")[0];

【讨论】：

【解决方案3】：

你也可以试试这个

var closeSpan = document.createElement("span");
closeSpan.setAttribute("class","sr-only");
closeSpan.html("Close");

【讨论】：

【解决方案4】：

假设您要将“span”标签添加到 id 为“myDiv”的 div：

var span = $("span"); // create element span
$(span).html("your text"); // add text
$("#myDiv").append($(span)); // append it to the div element

【讨论】：

仅供参考，没有必要这样做.append($(span))。在您的代码中，span 已经是 一个 jQuery 对象，.append(span) 就可以了。或span.appendTo("#myDiv")。这也是该变量的正确命名约定应该是 $span 的原因。
执行$("span") 不会创建跨度。它选择 DOM 中的每个现有跨度。