如何创建文本并将文本附加到现有元素，例如空跨度？

Question

在我搜索过的所有地方，我只找到了在创建新元素后追加文本节点的方法。例如，他们将创建一个新段落 (p) 元素，然后将文本节点附加到该新段落。但我想将文本节点添加到 existing 元素（在我的例子中，一个空跨度）。

Link 编码示例和说明 http://pastebin.com/K1EBMr4Z

<span class="span"></span> <!-- append textnode here -->

function newFunction(){
    var textnode = document.createTextNode("OK");

    // Append my `textnode` to the empty span here
}

提前致谢

Answer 1

很简单。使用 appendChild 方法。

 function newFunction(){
    var textnode = document.createTextNode("OK");
    document.querySelector(".span").appendChild(textnode);
 }

Answer 2

如果您为跨度指定一个 ID，您可以使用 document.getElementById() 获取它，然后更改该元素中的 html。 Here's a link to a SO that does this. Also, here's some docs for innerHTML and getElementByID.

Answer 3

为什么不使用 jQuery:

$('span').text('text');

或

$('span').html('<p>text</p>');

如果不用，就用：

document.getElementsByTagName('span').innerHTM = '<p>text</p>';

Answer 4

如评论中所述，您可以使用 appendChild() 方法将文本节点添加为跨度的子节点。

对于文本，您也可以只设置跨度的 innerHTML 属性。

容器中的两个示例：

function newFunction(){
  var span = document.getElementById('my-span');
  var otherSpan = document.getElementById('my-other-span');

  span.innerHTML = 'Yo this is text';

  var textNode = document.createTextNode("OK");
  otherSpan.appendChild(textNode);
};

newFunction();

https://jsfiddle.net/9pmhan8L/1/

Answer 5

您需要 select 首先要将 textNode 附加到的节点。然后，将 textNode 附加到那个 selected 节点（在你的例子中，是 .span 元素）。

<span class="span"></span>

function newFunction(){
    var textnode = document.createTextNode("Hello World!");

  // Select your existing element
  var empty_span = document.querySelector('.span');

  // Append the element
  empty_span.appendChild(textnode);
}

newFunction();

Example jsFiddle 还有。

如何创建文本并将文本附加到现有元素，例如空跨度？

How to createText and append text to an existing element e.g. empty span?

html

javascript

textnode

nodes