在特定文字位置前後加入文字

有時候，我們想互動的方式是，想在文章中的特定位置的前後，加入一些文字。
那麼，可以使用 .before 或 .after 這語法，在特定位置前後，以兄弟位置關係來加入文字。


 

這是我們要練習的文字。可以看到，這裡是被預設的位置。click之後，一些文字將在這位置的前後面加入。

 

語法：
<script>
const divASpan0527 = document.querySelector("#divId052701 > span");
const newSpanB = document.createElement("span");
newSpanB.style = "color: blue;";
newSpanB.textContent = "**這是span的文字**"

divASpan0527.addEventListener("click", (event)=> {
divASpan0527.before(newSpanB);
event.target.after("%%這是後面加入的字%%");
});
</script>