Question

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

我只想使用纯Javascript。

类似的东西：

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

Answer 1

是的，您可以使用document.createTextNode('the text')

创建文本节点

然后你可以像使用appendChild或insertBefore。

这样的元素插入它

在#childDiv：

之前插入文本的示例

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

Answer 2

仅供记录：

div.insertAdjacentHTML( 'beforeBegin', yourText );

其中div是您的孩子-DIV。

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

Answer 3

关于以前插入的主题和用户问题或之后的，以下是以下示例：

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。

Answer 4

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

Answer 5

这样的事情应该这样做：

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

Answer 6

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

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

赞：

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

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

6 个答案: