Question

我搜索的每个地方我都发现在创建新元素后附加文本节点的方法。例如，他们将创建一个新的段落（p）元素，然后他们将textnode附加到该新段落。但是我想在现有元素中添加一个textnode（在我的例子中，是一个空的span）。

<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

如果您为span指定了id，则可以使用document.getElementById（）获取它，然后更改该元素中的html。 Here's指向执行此操作的SO的链接。另外，这里有innerHTML和getElementByID的一些文档。

Answer 3

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

对于文本，您也可以设置范围的innerHTML属性。

bin中的两个示例：

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 4

您需要先选择要添加textNode的节点。然后，将textNode附加到所选节点（在您的情况下，.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也是如此。

Answer 5

为什么不使用jQuery：

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

或

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

如果您不使用它，请使用：

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

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

5 个答案: