如何在document.createElement（“span”）;？之后將文本添加到span中

Question

我正在嘗試使用函數.text（）將文本寫入元素范圍，但是我收到此錯誤UncaughtTypeError：undefined不是函數 ，我還嘗試了函數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

Answer 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頁面（我鏈接到上面）。

Answer 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];

Answer 3

你也可以嘗試一下

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

Answer 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