Вставить введенный текст ввода текста в пункт

Question

Как вставить текст ввода формы лица в предварительно сделанный абзац.

Например: Введите Ваше имя: John

Становится <p>Hello, my name is John</p>

Предпочтительно на той же или другой HTML-страницы. Так же, как все эти различные генераторы веб-страниц работают.

языки у меня есть доступ к как HTML, JQuery, JavaScript и JSON

Answer 1

Как указано в комментарии от Rory McCrossan, используйте .val() и .text() для этого.

Попробуйте это:

$('#btn').on('click', function() { 
 
    $('#text').text('Hello, my name is ' + $('#nameInput').val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<label for="nameInput">Your Name: 
 
    <input type="text" id='nameInput'> 
 
</label> 
 
<button id='btn'>Show Name</button> 
 

 
<p id='text'></p>

Answer 2

В Jquery: отправил

$('#paragraphId').text(myText); 

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

Answer 3

здесь скрипка: https://jsfiddle.net/mt42fn3s/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<input type="text" id="name"> 
<p id="result"></p> 

JQuery

$(document).ready(function() { 
    $("#name").keyup(function() { 
      var userName = $('#name').val(); 
      $('#result').html("Hello My name is " + userName); 
    }); 
}); 

Answer 4

Другим возможным решением этой проблемы является вывесить формы на текущую страницу (если вы можете использовать PHP и формы) и извлекать их из глобальной переменной $ _POST.

// index.php 

<?php $name = $_POST['name']; ?> 

// This is your predetermined paragraph, with the name dynamically inserted 
<p>Hello, my name is <?php echo $name; ?></p> 

<form action="index.php" method="post"> 
    <input id="name" name="name"> 
    <input type="submit" value="submit"> 
</form> 

Таким образом, гораздо проще добавить столько переменных в ваш параграф.

Если вы можете использовать Javacsript/Jquery, возможно, создайте интервалы с тегами идентификаторов, чтобы хранить информацию. Например;

<p>Hello, my name is <span id='name'></span></p> 
<p>My surname is <span id='surname'></span></p> 

// jquery 

var $name = $('.name').val(); // your name input box; 
var $surname = $('.surname').val(); //your surname input box 

$('#name').val($name); 
$('#surname').val($surname);