通过输入字段将文本添加到 h3/p/span

Question

我希望你能帮助我。

我已经创建了您可以称之为模板的模板。现在我想要的是通过输入字段向此模板添加文本。

例如：

<h3>i want to input text here</h3>
<input type="text>
<button>Add Title</button>

我

让它工作，但没有按照我想要的方式。我正在使用提示（）;如果复制代码，您将看到它必须外观的示例。但是用户应该能够在自己的文本中复制粘贴/键入，而事实并非如此可能使用 prompt（），因为当我打开另一个窗口时，它也会关闭。所以我想要手动输入文本并保持我的 CSS 和样式的选项。

这是我的代码：

/*function go() {
      var Adv1 = document.getElementById("tekst1");
      var Adv1p1 = document.getElementById("p1");
      var Advertentie1    = Adv1.textContent += var text = document.getElementById("name").value;
      var p1              = Adv1p1.textContent
    }
    */
var Adv1 = document.getElementById("tekst1");
var Adv1p1 = document.getElementById("p1");
var adv1s1 = document.getElementById("span1");
//var Adv2 = document.getElementById("tekst2");
//var Adv2p2 = document.getElementById("p2");
//var Adv3 = document.getElementById("tekst3");
//var Adv3p3 = document.getElementById("p3");
var Connect = new XMLHttpRequest();
var Advertentie1 = Adv1.textContent += prompt("Wat is de Titel", "Voer hier uw titel in");
var p1 = Adv1p1.textContent += prompt("Url-pagina", "Voer hier uw url in");
var smalltextspan = adv1s1.textContent += prompt("description", "add your description here");
//var Advertentie2    = Adv2.textContent    +=  prompt("Wat is de Titel","Voer hier uw titel in");
//var p2              = Adv2p2.textContent  +=  prompt("Url-pagina","Voer hier uw url in");
//var Advertentie3    = Adv3.textContent    +=  prompt("Wat is de Titel","Voer hier uw titel in");
//var p3              = Adv3p3.textContent  +=  prompt("Url-pagina","Voer hier uw url in");

#input1 {
  width: 600px;
  height: 75px;
  border: solid black 1px;
  margin-top: 20px;
  padding: 0px;
}
h3 {
  padding: 0px;
  margin: 0px;
  font-family: arial, sans-serif;
  color: #1a0dab;
  text-align: left;
  cursor: pointer;
  font-size: 18px;
}
p {
  color: rgb(0, 102, 33);
  font-size: 14px;
  font-style: normal;
  height: auto;
  width: auto;
  text-align: left;
  display: block;
  font-weight: 400px;
  line-height: 16px;
  padding: 0px;
  margin: 0px;
  font-family: arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.text {
  color: rgb(84, 84, 84);
  font-size: 13px;
  font-family: arial, sans-serif;
  text-align: left;
  word-wrap: break-word;
  font-weight: 400;
  line-height: 18.2px;
  display: inline;
  margin: 0px;
  padding: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="inputWrapper">
  <!-- max 160 characters in description -->
  <div id="input1">
    <h3>Create dynamic display ads - AdWords Help - Google Support </h3>
    <p>https://support.google.com/adwords/answer/3265299?hl=en </p>
    <span class="text">This article only applies to the previous AdWords experience.
            Determine ... For the greatest reach, create responsive dynamic display ads.
            Responsive ads can ..</span>
  </div>
  <div id="input1">
    <h3 id="tekst1"></h3>
    <p id="p1"></p>
    <span id="span1" class="text"></span>
  </div>
  <!--Name: <input id="name" type="text">
        <button onclick="go()">Go</button>
        -->
  <div id="input1">
    <h3 id="tekst2"></h3>
    <p id="p2"></p>
    <span id="span2" class="text"></span>
  </div>
  <div id="input1">
    <h3 id="tekst3"></h3>
    <p id="p3"></p>
    <span id="span3" class="text"></span>
  </div>
</div>

Answer 1

如果我没站起来，我为你做了这个小提琴，如果我错了，请告诉我更多细节并澄清你应该做什么

    <label for="title">title</label>
<input id="title"/>
<br>
<label for="description">description</label>
<input id="description"/>

<h3 id="title-replace">
replace me please
</h3>
<h3 id="description_rep">
replace me please
</h3>

和jquery代码：

$("#title").on('change input',function(){
$('#title-replace').html($(this).val());
})
$("#description").on('change input',function(){
$('#description_rep').html($(this).val());
})

CSS：

label[for="title"]{
  color:red;
}
#title-replace{
  color:green;
}

Answer 2

@arya AG解决了这个问题，谢谢！ :)

如果我

正确取消了，我为你做了这个小提琴，如果我错了，请告诉我更多细节并澄清你应该做什么

 <label for="title">title</label>
<input id="title"/>
<br>
<label for="description">description</label>
<input id="description"/>

<h3 id="title-replace">
replace me please
</h3>
<h3 id="description_rep">
replace me please
</h3>
and jquery code:
$("#title").on('change input',function(){
$('#title-replace').html($(this).val());
})
$("#description").on('change input',function(){
$('#description_rep').html($(this).val());
})
the css:
label[for="title"]{
  color:red;
}
#title-replace{
  color:green;
}