Как я могу заменить элемент на другой элемент в html?

#javascript #html #jquery

#язык JavaScript #HTML #jquery

Вопрос:

Как я могу заменить значение входного тега на тег p.para? Пожалуйста, найдите код, который я использовал…

Html-разметка :

 lt;h2gt;jQuery Misclt;/h2gt;  lt;div class="content"gt;    lt;pgt;  lt;a href="#"gt;My linklt;/agt;  lt;/pgt;   lt;p class="para"gt;This is para no #1lt;/pgt;   lt;pgt;  lt;stronggt;Hello world!lt;/stronggt;  lt;/pgt;   lt;buttongt;Actionlt;/buttongt;  lt;/divgt;  

Jquery :

 lt;script type="text/javascript"gt;    jQuery(function($) {   const $p = $('lt;pgt;This is a new para!lt;/pgt;');   const $contentDiv = $('.content');   $('button').on('click', function() {   const $userName = $('lt;h3gt;lt;input type="text" id="input" placeholder="Enter your name"gt;lt;/h3gt;')  const $okay = $('lt;button class="bttn"gt;Okaylt;/buttongt;')  const $cancel = $('lt;button class="bttn_2"gt;Cancellt;/buttongt;')    // $('.para').remove();  // $contentDiv.append($userName);  $userName.appendTo($contentDiv);  $okay.appendTo($contentDiv);  $cancel.appendTo($contentDiv);   $('.bttn_2').on('click', function() {   $userName.remove();  $okay.remove();  $cancel.remove();   });    $('.bttn').on('click', function() {    $okay.remove();  $cancel.remove();  $userName.appendTo($contentDiv);   $('div.content div.para').text(function() {  return $('input',this).val();   });   });   });  });  lt;/scriptgt;  

Здесь я хочу изменить значение входного тега на элемент p.para. После имени пользователя const $для замены элемента класса p.para при отправке входного значения. Каждый раз, когда я отправляю входное значение, оно должно заменяться предыдущим входным значением, которое я отправил. Как я могу это сделать?? пожалуйста, помогите.

Пожалуйста, помогите..заранее спасибо!!

Ответ №1:

Вы можете опробовать этот код :

 lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt; lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"gt;lt;/scriptgt; lt;script type="text/javascript"gt;    jQuery(function($) {   const $p = $('lt;pgt;This is a new para!lt;/pgt;');   const $contentDiv = $('.content');   $('button').on('click', function() {    const $userName = $('lt;h3gt;lt;input type="text" id="input" placeholder="Enter your name"gt;lt;/h3gt;')  const $okay = $('lt;button class="bttn"gt;Okaylt;/buttongt;')  const $cancel = $('lt;button class="bttn_2"gt;Cancellt;/buttongt;')      // $('.para').remove();  // $contentDiv.append($userName);  $userName.appendTo($contentDiv);  $okay.appendTo($contentDiv);  $cancel.appendTo($contentDiv);   $('.bttn_2').on('click', function() {   $userName.remove();  $okay.remove();  $cancel.remove();   });    $('.bttn').on('click', function() {  $okay.remove();  $cancel.remove();  $userName.appendTo($contentDiv);   var input_val = $('#input').val();  $('.para').text(input_val);  });   });  });  lt;/scriptgt; lt;/headgt; lt;bodygt;  lt;h2gt;jQuery Misclt;/h2gt;  lt;div class="content"gt;    lt;pgt;  lt;a href="#"gt;My linklt;/agt;  lt;/pgt;   lt;p class="para"gt;This is para no #1lt;/pgt;   lt;pgt;  lt;stronggt;Hello world!lt;/stronggt;  lt;/pgt;   lt;buttongt;Actionlt;/buttongt;  lt;/divgt;  lt;/bodygt; lt;/htmlgt;