HTML line break breaks after javascript function

Question

I made a javascript function which changes some parts of content inside a <div>, but when the function is activated, the line break <br> breaks. What is the cause of this problem, and how can I fix this?

function addrmv(){
var tx = document.getElementById('body');
  currentvalue = document.getElementById('offon').value;
  if(currentvalue == "add space before -i"){
    document.getElementById("offon").value="rmv space before -i";
    tx.textContent = tx.textContent.replaceAll('\u202F\u1873', '\u0020\u202F\u1873');
  }else{
    document.getElementById("offon").value="add space before -i";
    tx.textContent = tx.textContent.replaceAll('\u0020\u202F\u1873', '\u202F\u1873');
  }
}

<input type="button" value="add space before -i" id="offon" onclick="addrmv();">

<div id="body" contenteditable="true">◎ᡤᠣᠯᠮᡳᠨ ᡧᠠᠩᡤᡳᠶᠠᠨ ᠠᠯᡳᠨ ᡩᡝᠨ<br> ᠵᡠᠸᡝ ᡨᠠᠩᡤᡡ ᠪᠠ᠈ ᡧᡠᡵᡩᡝᠮᡝ<br> ᠮᡳᠩᡤᠠᠨ ᠪᠠ᠈ ᡨᡝᡵᡝ ᠠᠯᡳᠨ ᡳ<br> ᠨᡳᠩᡤᡠ ᡩᡝ ᡨᠠᠮᡠᠨ ᡳ ᡤᡝᠪᡠᠩᡤᡝ<br> ᠣᠮᠣ ᠪᡳ᠈ ᡧᡠᡵᡩᡝᠮᡝ ᠵᠠᡴᡡᠨᠵᡠ ᠪᠠ᠈<br> ᡨᡝᡵᡝ ᠠᠯᡳᠨ ᠴᡳ ᡨᡠᠴᡳᡴᡝᠩᡤᡝ<br> ᠶᠠᠯᡠ᠈ ᡥᡡᠨᡨᡠᠩ᠈ ᠠᡳᡥᡠ ᠰᡝᡵᡝ<br> ᡳᠯᠠᠨ ᡤᡳᠶᠠᠩ᠈ ᠶᠠᠯᡠ ᡤᡳᠶᠠᠩ ᠠᠯᡳᠨ ᡳ<br> <br> ᠵᡠᠯᡝᡵᡤᡳᠴᡳ ᡨᡠᠴᡳᡶᡳ ᠸᠠᠰᡳᡥᡡᠨ ᡝᠶᡝᡶᡳ<br> ᠯᡳᠶᠣᠣᡩᡠᠩ ᠨᡳ ᠵᡠᠯᡝᡵᡤᡳ ᠮᡝᡩᡝᡵᡳ ᡩᡝ<br> ᡩᠣᠰᡳᡴᠠᠪᡳ᠈ ᡥᡡᠨᡨᡠᠩ ᡤᡳᠶᠠᠩ ᠠᠯᡳᠨ ᡳ<br> ᠠᠮᠠᡵᡤᡳᠴᡳ ᡨᡠᠴᡳᡶᡳ ᠠᠮᠠᠰᡳ ᡝᠶᡝᡶᡳ<br> ᠠᠮᠠᡵᡤᡳ ᠮᡝᡩᡝᡵᡳ ᡩᡝ ᡩᠣᠰᡳᡴᠠᠪᡳ᠈ ᠠᡳᡥᡠ<br> ᠪᡳᡵᠠ ᠸᡝᠰᡳᡥᡠᠨ ᡝᠶᡝᡶᡳ᠈ ᡩᡝᡵᡤᡳ<br> ᠮᡝᡩᡝᡵᡳ ᡩᡝ ᡩᠣᠰᡳᡴᠠᠪᡳ᠈ ᡝᡵᡝ ᡳᠯᠠᠨ<br> ᡤᡳᠶᠠᠩ ᡩᡝ ᠪᠣᠣᠪᠠᡳ ᡨᠠᠨᠠ᠈ ᡤᡝᠩᡤᡳᠶᡝᠨ</div>

before:

after:

@Liam You will see how it works if you try the snippet, I wasn't very clear about this in the description. — Henry, Feb 01 '21 at 10:29

JustAMartin · Accepted Answer · 2021-02-01T10:44:33.743

It's because you are using textContent. It ignores HTML tags. That's why your <br> gets removed. You should use innerHTML instead. Here is an helpful article explaining the differences: https://medium.com/better-programming/whats-best-innertext-vs-innerhtml-vs-textcontent-903ebc43a3fc

function addrmv(){
var tx = document.getElementById('body');
 
 currentvalue = document.getElementById('offon').value;
  if(currentvalue == "add space before -i"){
    document.getElementById("offon").value="rmv space before -i";
    tx.innerHTML = tx.innerHTML.replaceAll('\u202F\u1873', '\u0020\u202F\u1873');
  } else {
    document.getElementById("offon").value="add space before -i";
    tx.innerHTML = tx.innerHTML.replaceAll('\u0020\u202F\u1873', '\u202F\u1873');
  }
}

<input type="button" value="add space before -i" id="offon" onclick="addrmv();">

<div id="body">◎ᡤᠣᠯᠮᡳᠨ ᡧᠠᠩᡤᡳᠶᠠᠨ ᠠᠯᡳᠨ ᡩᡝᠨ<br> ᠵᡠᠸᡝ ᡨᠠᠩᡤᡡ ᠪᠠ᠈ ᡧᡠᡵᡩᡝᠮᡝ<br> ᠮᡳᠩᡤᠠᠨ ᠪᠠ᠈ ᡨᡝᡵᡝ ᠠᠯᡳᠨ ᡳ<br> ᠨᡳᠩᡤᡠ ᡩᡝ ᡨᠠᠮᡠᠨ ᡳ ᡤᡝᠪᡠᠩᡤᡝ<br> ᠣᠮᠣ ᠪᡳ᠈ ᡧᡠᡵᡩᡝᠮᡝ ᠵᠠᡴᡡᠨᠵᡠ ᠪᠠ᠈<br> ᡨᡝᡵᡝ ᠠᠯᡳᠨ ᠴᡳ ᡨᡠᠴᡳᡴᡝᠩᡤᡝ<br> ᠶᠠᠯᡠ᠈ ᡥᡡᠨᡨᡠᠩ᠈ ᠠᡳᡥᡠ ᠰᡝᡵᡝ<br> ᡳᠯᠠᠨ ᡤᡳᠶᠠᠩ᠈ ᠶᠠᠯᡠ ᡤᡳᠶᠠᠩ ᠠᠯᡳᠨ ᡳ<br> <br> ᠵᡠᠯᡝᡵᡤᡳᠴᡳ ᡨᡠᠴᡳᡶᡳ ᠸᠠᠰᡳᡥᡡᠨ ᡝᠶᡝᡶᡳ<br> ᠯᡳᠶᠣᠣᡩᡠᠩ ᠨᡳ ᠵᡠᠯᡝᡵᡤᡳ ᠮᡝᡩᡝᡵᡳ ᡩᡝ<br> ᡩᠣᠰᡳᡴᠠᠪᡳ᠈ ᡥᡡᠨᡨᡠᠩ ᡤᡳᠶᠠᠩ ᠠᠯᡳᠨ ᡳ<br> ᠠᠮᠠᡵᡤᡳᠴᡳ ᡨᡠᠴᡳᡶᡳ ᠠᠮᠠᠰᡳ ᡝᠶᡝᡶᡳ<br> ᠠᠮᠠᡵᡤᡳ ᠮᡝᡩᡝᡵᡳ ᡩᡝ ᡩᠣᠰᡳᡴᠠᠪᡳ᠈ ᠠᡳᡥᡠ<br> ᠪᡳᡵᠠ ᠸᡝᠰᡳᡥᡠᠨ ᡝᠶᡝᡶᡳ᠈ ᡩᡝᡵᡤᡳ<br> ᠮᡝᡩᡝᡵᡳ ᡩᡝ ᡩᠣᠰᡳᡴᠠᠪᡳ᠈ ᡝᡵᡝ ᡳᠯᠠᠨ<br> ᡤᡳᠶᠠᠩ ᡩᡝ ᠪᠣᠣᠪᠠᡳ ᡨᠠᠨᠠ᠈ ᡤᡝᠩᡤᡳᠶᡝᠨ</div>

HTML line break breaks after javascript function

1 Answers1