Javascript 在 HTML 元素之前或之后添加文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7378097/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add text before or after an HTML element
提问by John
If i have an HTML element like <div>with some text inside or another elements can I add before or after this div some text data without an html element, just plain text?
如果我有一个 HTML 元素，比如<div>里面有一些文本或其他元素，我可以在这个 div 之前或之后添加一些没有 html 元素的文本数据，只是纯文本吗？
I'd like to use only pure Javascript.
我只想使用纯 Javascript。
Something like :
就像是 ：
<div id="parentDiv">
my text must be added here
<div id="childDiv"></div>
</div>
回答by Arnaud Le Blanc
Yes, you can create a text node with document.createTextNode('the text')
是的，您可以创建一个文本节点 document.createTextNode('the text')
Then you can insert it like an element, with appendChild or insertBefore.
然后你可以像元素一样插入它，使用 appendChild 或 insertBefore。
Example that insert a text before #childDiv:
在#childDiv 之前插入文本的示例：
var text = document.createTextNode('the text');
var child = document.getElementById('childDiv');
child.parentNode.insertBefore(text, child);
回答by ?ime Vidas
Just for the record:
仅作记录：
div.insertAdjacentHTML( 'beforeBegin', yourText );
where divis your child-DIV.
div你的孩子-DIV在哪里。
Live demo:http://jsfiddle.net/ZkzDk/
现场演示：http : //jsfiddle.net/ZkzDk/
回答by javaBean007
In regards to the topic and the users question for inserting before or after, here is an example for after:
关于主题和用户在 before 或after插入的问题，以下是 after 的示例：
var text = document.createTextNode("my text must be added here.");
var childTag = document.getElementById("childDiv");
childTag.parentNode.insertBefore(text, childTag.nextSibling);
If the childTag does not have any siblings, it is okay because the insertBefore method handles this case and simply adds it as the last child.
如果 childTag 没有任何兄弟姐妹，那没关系，因为 insertBefore 方法处理这种情况并将其添加为最后一个孩子。
Also can possibly use the appendChild() method after creating text node then add your childTag via the parentNode.
也可以在创建文本节点后使用 appendChild() 方法，然后通过 parentNode 添加您的 childTag。
回答by Juan Marco
If you just need text, I find that element.insertAdjacentText(position, text)is flexible for many scenarios and is also compatible with older browsers like IE6. Where positionis exactly where you want the text to be and textis the text node or just a string. The options are:
如果您只需要文本，我发现这element.insertAdjacentText(position, text)对于许多场景都很灵活，并且还与 IE6 等旧浏览器兼容。Whereposition正是您希望文本所在的位置，text是文本节点还是字符串。选项是：
'beforebegin'Before the element itself.'afterbegin'Just inside the element, before its first child.'beforeend'Just inside the element, after its last child.'afterend'After the element itself.
'beforebegin'在元素本身之前。'afterbegin'就在元素内部，在它的第一个子元素之前。'beforeend'就在元素内部，在它的最后一个子元素之后。'afterend'在元素本身之后。
Like this:
像这样：
let div = document.getElementById('parentDiv');
div.insertAdjacentText('afterbegin', 'My Plain Text..');
回答by Leonid
You can add text node. Create node - document.createTextNode('text')and then insert/append/replace - do whatever you want.
您可以添加文本节点。创建节点 -document.createTextNode('text')然后插入/追加/替换 - 做任何你想做的事。
回答by kfuglsang
Something like this should do it:
像这样的事情应该这样做：
<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>
