Question

我熟悉在给定参考节点之前或之前插入文本节点。但是，我想知道如何在给定节点中的文本之间插入标记。例如，

Before insertion: <p>Lorem dolor</p>
After insertion: <p>Lorem <span>ipsum</span> dolor</p>

必须在另一个节点内的N个字符（我不需要用户的光标选择位置）之后插入span节点。这可能吗？

Answer 1

您需要将文本放入变量中，然后将其从DOM中删除。拆分它，然后插入第一部分，然后插入span节点，然后插入第二部分。

var p = document.getElementById('myParagraph');
var text = p.childNodes[0];

// Split the text
var len = 5
var text1 = text.nodeValue.substr(0, len);
var text2 = text.nodeValue.substr(len);

var span = document.createElement('span');
span.appendChild(document.createTextNode(' dolor'));

// Remove the existing text
p.removeChild(p.childNodes[0]);

// Put the new text in
p.appendChild(document.createTextNode(text1));
p.appendChild(span);
p.appendChild(document.createTextNode(text2));

Answer 2

正确的方法（使用DOM-Core接口）将是：

var p = document.getElementById('myParagraph');
var text = p.childNodes[0];
var at = 5;

// create new span node with content
var span = document.createElement("span");
span.appendChild(document.createTextNode('ipsum'));

// Split the text node into two and add new span
p.insertBefore(span, text.splitText(at));

Answer 3

您可以检查节点innerHTML属性并进行修改。或者，您可以查看childNodes集合并使用其中的元素（删除旧文本节点并在其位置插入新节点）。

在文本之间插入节点

3 个答案: