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

【问题标题】：Add text before or after an HTML element在 HTML 元素之前或之后添加文本
【发布时间】：2011-09-11 12:14:17
【问题描述】：

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

我只想使用纯 Javascript。

类似：

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

【问题讨论】：

标签： javascript html

【解决方案1】：

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

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

在#childDiv 之前插入文本的示例：

var text = document.createTextNode('the text');
var child = document.getElementById('childDiv');
child.parentNode.insertBefore(text, child);

【讨论】：

您也可以尝试“insertAdjacentText”或“insertAdjacentHTML”方法：developer.mozilla.org/en-US/docs/Web/API/…

【解决方案2】：

仅作记录：

div.insertAdjacentHTML( 'beforeBegin', yourText );

div 是您的子 DIV。

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

【讨论】：

也可以在...之后添加 div.insertAdjacentHTML( 'afterEnd', 'my text added after' );有谁知道能不能去掉？（不使用类或 id）
@tkerwood 当然。您需要检索对该 Text 节点的引用，然后使用 .removeChild() 方法（在其父节点上）。

【解决方案3】：

如果你只需要文字，我发现element.insertAdjacentText(position, text)在很多场景下都很灵活，并且还兼容IE6等旧版浏览器。 position 正是您希望文本所在的位置，text 是文本节点或只是一个字符串。选项有：

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

像这样：

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

【讨论】：

【解决方案4】：

关于插入 before 或 after 的主题和用户问题，以下是 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。

【讨论】：

【解决方案5】：

您可以添加文本节点。创建节点 - document.createTextNode('text') 然后插入/追加/替换 - 随心所欲。

【讨论】：

【解决方案6】：

应该这样做：

<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>

【讨论】：