Не работает innerHTML для добавления текста после каждого абзаца

Question

Задание:

Ввести в текстовое поле текст и при нажатии на кнопку добавить введенный текст после каждого абзаца, а также сделать для них шрифт жирным и курсивным.

Каждый абзац у меня распознается по классу. Новый текст вставляется, а прошлый исчезает и горит undefined. Нужно осуществить именно с innerHTML.

<head>
<script>
function Change()
{
        T = document.getElementById('txt')
        Headings = document.getElementsByClassName('r')
        Tx=T.value
        
        SStart='<p style ="font-style:italic;font-weight: bold;">'
        SEnd='</p></body>'
        //Or - nobr and indent by SEnd
        TEXT=SStart+Tx+SEnd
        
        Old=Headings.innerHTML
        
        for(i=0; i<Headings.length; i++)
        {
        Headings[i].innerHTML = Old+TEXT;
        }
}
</script>
</head>
<body>
<input type="button" style ="height: 40px; width: 80px" value='Text'  id='but' onclick="Change()"/>
<input type='text' id='txt'>

<p class='r'>После запуска Советским Союзом искусственного спутника Земли в 1957 году, Министерство обороны США посчитало, что на случай войны Америке нужна надёжная система передачи информации. 
<p class='r'>Агентство передовых исследовательских проектов США (ARPA) предложило разработать для этого компьютерную сеть. Разработка такой сети была поручена Калифорнийскому университету в Лос-Анджелесе, Стэнфордскому исследовательскому центру, Университету штата Юта и Университету штата Калифорния в Санта-Барбаре. 
</body>

Answer 1

function Change() {
  let T = document.getElementById('txt')
  let Headings = document.getElementsByClassName('r')
  let Tx = T.value

  let SStart = '<p style ="font-style:italic;font-weight: bold;">'
  let SEnd = '</p></body>'
  let TEXT = SStart + Tx + SEnd

  let html = "";
  for (i = 0; i < Headings.length; i++) {
    html += Headings[i].innerHTML + TEXT;
  }
  document.getElementById('container').innerHTML = html;
}

<input type="button" style="height: 40px; width: 80px" value='Text' id='but' onclick="Change()" />
<input type='text' id='txt'>

<div id="container">
<p class='r'>После запуска Советским Союзом искусственного спутника Земли в 1957 году, Министерство обороны США посчитало, что на случай войны Америке нужна надёжная система передачи информации.</p>
<p class='r'>Агентство передовых исследовательских проектов США (ARPA) предложило разработать для этого компьютерную сеть. Разработка такой сети была поручена Калифорнийскому университету в Лос-Анджелесе, Стэнфордскому исследовательскому центру, Университету штата
  Юта и Университету штата Калифорния в Санта-Барбаре.</p>
</div>

Answer 2

Приблизительный вариант, близкий к вашему (правда, я предпочёл добавлять теги для жирного шрифта и курсива, чем дублировать теги абзацев). Ещё не совсем понятно, нужно ли менять начертание только для добавляемого текста или для всех абзацев также — этот код меняет начертание для всех абзацев.

function Change()
{
        T = document.getElementById('txt');
        Headings = document.getElementsByClassName('r');
        Tx=T.value;
        
        SStart='<b><i>';
        SEnd='</i></b>';
        
        
        for(i=0; i<Headings.length; i++)
        {
          Old=Headings[i].innerHTML;
          Headings[i].innerHTML = SStart + Old + Tx + SEnd;
        }
}

<body>
<input type="button" style ="height: 40px; width: 80px" value='Text'  id='but' onclick="Change()"/>
<input type='text' id='txt'>

<p class='r'>После запуска Советским Союзом искусственного спутника Земли в 1957 году, Министерство обороны США посчитало, что на случай войны Америке нужна надёжная система передачи информации. 
<p class='r'>Агентство передовых исследовательских проектов США (ARPA) предложило разработать для этого компьютерную сеть. Разработка такой сети была поручена Калифорнийскому университету в Лос-Анджелесе, Стэнфордскому исследовательскому центру, Университету штата Юта и Университету штата Калифорния в Санта-Барбаре. 
</body>

БЛОГ НА HUSL

Не работает innerHTML для добавления текста после каждого абзаца

Ответы (2 шт):