在HTML元素之前或之后添加文本

Add text before or after an HTML element

本文关键字：或之后 添加 文本 HTML 元素      更新时间：2023-09-26

如果我有一个像<div>这样的HTML元素，里面有一些文本或其他元素，我可以在这个div之前或之后添加一些没有HTML元素的文本数据，只是纯文本吗?

我想只使用纯Javascript。

例如:

<div id="parentDiv">
   my text must be added here
  <div id="childDiv"></div>
</div>

是的，您可以使用document.createTextNode('the text')创建文本节点

然后你可以像插入元素一样插入它，使用appendChild或insertBefore。

在#childDiv:

前插入文本的示例
var text = document.createTextNode('the text');
var child = document.getElementById('childDiv');
child.parentNode.insertBefore(text, child);

郑重声明:

div.insertAdjacentHTML( 'beforeBegin', yourText );

其中div是您的子div。

现场演示: http://jsfiddle.net/ZkzDk/

如果您只需要文本，我发现element.insertAdjacentText(position, text)在许多情况下都是灵活的，并且还与IE6等旧浏览器兼容。其中position是您想要文本所在的位置，text是文本节点或只是一个字符串。选项为:

  • 'beforebegin'在元素本身之前。
  • 'afterbegin'在元素内部，在它的第一个子元素之前。
  • 'beforeend'在元素内部，在它的最后一个子元素之后。
  • 'afterend'元素本身之后。

: 

let div = document.getElementById('parentDiv');
div.insertAdjacentText('afterbegin', 'My Plain Text..');

关于在之前或之后插入的主题和用户问题，这里有一个after的例子:

   var text = document.createTextNode("my text must be added here.");
   var childTag = document.getElementById("childDiv");
   childTag.parentNode.insertBefore(text, childTag.nextSibling);

如果childTag没有任何兄弟，则没关系，因为insertBefore方法处理这种情况，并简单地将其作为最后一个子元素添加。

也可以在创建文本节点后使用appendChild()方法，然后通过parentNode添加childTag。

可以添加文本节点。创建节点- document.createTextNode('text')，然后插入/追加/替换-做任何你想做的

应该这样做:

<script type="text/javascript">
  var parent = document.getElementById('parentDiv');
  var sibling = document.getElementById('childDiv');
  var text = document.createTextNode('new text');
  parent.insertBefore(text, sibling);
</script>
相关文章：