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

无处不在我已经找到了创建新元素后追加文本节点的方法。例如，他们将创建一个新段落（p）元素，然后他们将textnode附加到该新段落。但我想添加一个文本节点到现有的元素（在我的情况下，一个空的跨度）。如何创建文本并将文本附加到现有元素，例如空跨度？

链接代码，例如和澄清 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 
}

在此先感谢

来源

2016-04-21 kensington

这很容易，目标是跨度和追加 - >'document.querySelector（'。span'）。appendChild（new_element）' – adeneo

使用jquery，现在您已经创建了跨度，并按类设置了他的值！ –

你应该明确地使用更多的jQuery，它完成所有的事情。 – adeneo

正如在评论中提到，你可以添加使用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/

来源

2016-04-21 20:40:37

有可能做到这一点，选择一个类或标记名而不是ID？ – kensington

绝对有可能。用'document.querySelector（'。span'）'替换'document.getElementById（'my-span'）;'以得到第一个带有class =“span”'或者'document.querySelector（'span'）的元素。 '得到第一个''元素。 –

很简单。使用appendChild方法。

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

来源

2016-04-21 20:38:38

如果你给了span一个id，你可以使用document.getElementById（）来获取它，然后在该元素内改变html。 Here's链接到这样做的SO。另外，这里有一些innerHTML和getElementByID的文档。

来源

2016-04-21 20:39:25 nscalf

-1

为什么不使用jQuery：

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

或

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

如果你不使用它，使用：

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

来源

2016-04-21 20:40:24 arturas

因为它没有用jQuery标记，显然，这就是为什么！ – adeneo

Asker并没有说他们已经加载了jQuery。 –

您需要选择要首先附加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为好。

来源

2016-04-21 20:41:18 romellem

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

回答

相关问题