将元素作为兄弟元素附加在元素之后？ [复制]

Posted 2023-02-21

【中文标题】将元素作为兄弟元素附加在元素之后？ [复制]

【英文标题】：Append element as sibling after element? [duplicate]

【发布时间】：2014-02-20 17:45:27

【问题描述】：

如何使用纯 javascript 在 html 元素后添加文本？有 appendChild 但这会将它添加到元素中。相反，我想在这样的元素之后添加它作为兄弟：

<img id="myimg" src="..." />

<script>
  var myimg = document.getElementById('myimg');
  myimg.appendAFTER('This is my caption.'); //pseudo-code and doesn't really work
</script>

我想这样结束：

<img id="myimg" src="..." />
This is my caption.

来自 jQuery 的 after() 的 Javascript 等效项是什么？

【问题讨论】：

检查我的更新答案

【参考方案1】：

查看Node.@987654321@ 和Node.@987654322@ (fiddle)：

var myimg = document.getElementById('myimg');
var text = document.createTextNode("This is my caption.");
myimg.parentNode.insertBefore(text, myimg.nextSibling)

或Element.@987654324@ (fiddle)：

var myimg = document.getElementById('myimg');
myimg.insertAdjacentHTML("afterend", "This is my caption.");

【参考方案2】：

请使用以下代码：

<img id="myimg" src="..." />

<script>
  var myimg = document.getElementById('myimg');
  var txt=document.createElement("span");
  txt.innerHTML="Whatever text you want to write . . .";
  if(myimg.nextSibling)
    myimg.parentNode.insertBefore(txt,myimg.nextSibling);
  else
    myimg.parentNode.appendChild(txt);
  
</script>

【讨论】：

您不需要检查.nextSibling。如果引用节点是null，insertBefore() 会很乐意追加新节点。