Javascript 如何更改稍后使用jQuery添加的html元素？_Javascript_Jquery_Html

Javascript 如何更改稍后使用jQuery添加的html元素？

javascript jquery html

Javascript 如何更改稍后使用jQuery添加的html元素？,javascript,jquery,html,Javascript,Jquery,Html,我有以下问题： <div class="container"> <button id="buttonOne">ButtonOne</button> <button id="buttonTwo">ButtonTwo</button> </div> <p id="myParagraph"> <br> </p> 钮扣钮扣二

我有以下问题：

    <div class="container">
       <button id="buttonOne">ButtonOne</button>
       <button id="buttonTwo">ButtonTwo</button>
   </div>
   <p id="myParagraph">
     <br>
   </p>


钮扣
钮扣二

以及以下脚本：

<script>

var appendedInput = $('#buttonOne').one("click", function(event) {
  var myInput ="<input name=inputOne id="inputOneId"></input>;
  $('#myParagraph').append(myInput);
;})

</script>


var appendedInput=$（'#buttonOne'）。一个（“单击”，函数（事件）{
var myInput=“；
$（“#我的段落”）。追加（我的输入）；
;})

已编辑

好的。我希望按钮二能像按钮一一样执行，或者在按钮不存在的情况下，在同一段落中添加一个新元素，或者用按钮二生成的输入更改#myInput。我希望这现在更清楚。现在我甚至在想我到底为什么要这么做。。。所以我的问题是，如何让我的脚本执行这样的功能？如果仍然存在不存在的元素，我如何更改该元素而不是在同一段落中添加新元素。很抱歉，这让人困惑，我也发现我的问题非常困惑，这是一个获得答案的地方

以后编辑的代码 在Jazz的帮助下，我现在正在尝试将.html与.append混合使用，并获得一些看似可行的结果

<script>
  var inputOne ="<input name='inputOne' id='inputOneId'></input>";
  var inputTwo ="<input name='inputTwo' id='inputTwoId'></input>";      

  var appendedInputOne = $('#buttonOne').one("click", function(event) {
      $('#myParagraph').append(inputOne);
;})

 var appendedInputTwo = $('#buttonTwo').one("click, function(event) {
     $('#myParagraph').append(inputTwo);
</script>


var inputOne=“”；
var=”；
var appendedInputOne=$（“#buttonOne”）.one（“单击”，函数（事件）{
$（“#我的段落”）.append（inputOne）；
;})
var appendedInputWO=$（“#buttonTwo”）.one（“单击，函数（事件）{
$（“#我的段落”）。追加（输入WO）；

现在又是下面的案例场景。如果单击按钮一，然后单击按钮二，我们有两个输入字段，我们总共只查找一个输入字段。按钮二应该只在没有输入字段的情况下追加。我正要切换到php并从php解决此问题。但这仍然是一个很好的Javascript问题lol

像这样使用


var appendedInput=$（'：button'）。在（“单击”上，函数（事件）{
var myInput=“”；
$（“#我的段落”）。追加（我的输入）；
;})

替换它，而不是附加它

with.html（值）


$（“#按钮无”）。在（“单击”上，函数（事件）{
var myInput=“”；
$（'#My段落'）.html（myInput）；
});
$（“#按钮两”）。在（“单击”上，函数（事件）{
var myInput=“”；
$（'#My段落'）.html（myInput）；
});

因此，如果我理解正确，您有两个按钮，如果单击第一个按钮，则应在

中添加一个输入字段，这与您已有的类似：

$('#buttonOne').one("click", function(event) {
    var myInput = "<input id='idInput' name='inputMe'></input>";
    $('#myParagraph').append(myInput);
});

$（'#buttonOne'）。一个（“单击”，函数（事件）{
var myInput=“”；
$（“#我的段落”）。追加（我的输入）；
});

如果在单击第一个按钮之前单击了第二个按钮，则该按钮应具有与第一个单击处理程序相同的功能，因此首先将其重构为一个函数：

function appendInput() {
    var myInput = "<input id='idInput' name='inputMe'></input>";
    $('#myParagraph').append(myInput);
}

$('#buttonOne').one("click", function(event) {
    appendInput();
});

函数appendInput（）{
var myInput=“”；
$（“#我的段落”）。追加（我的输入）；
}
$（'#buttonOne'）。一个（“单击”，函数（事件）{
appendInput（）；
});

现在，我们为第二个按钮添加了一个新的单击处理程序，用于检查输入是否存在并相应地处理案例：

function appendInput() {
    var myInput = "<input id='idInput' name='inputMe'></input>";
    $('#myParagraph').append(myInput);
}

function changeInput() {
    var myInputValue = $('#idInput').val(); // get value of input field
    myInputValue = myInputValue + " <- changed"; // do your value changing here
    $('#idInput').val(myInputValue); // set value back to input field
}

$('#buttonOne').one("click", function(event) {
    if(!$('#idInput').length) { //this evaluates to false if the element exists
        appendInput();
    }
});


$('#buttonTwo').on("click", function(event) {
    if(!$('#idInput').length) { //this evaluates to false if the element exists
        appendInput();
    } else {
        changeInput();
    }
});

函数appendInput（）{
var myInput=“”；
$（“#我的段落”）。追加（我的输入）；
}
函数changeInput（）{
var myInputValue=$（'#idInput'）.val（）；//获取输入字段的值
myInputValue=myInputValue+“使用普通Javascript而不是jQuery解决了这个问题，并更改了一些html
<html>
<head>
<script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "edited";
  }
  function mySecondFunction() {
    document.getElementById("demo").innerHTML ="<input></input>";
  }
</script>
</head>

<body>

<h1>JavaScript in Head</h1>

<p id="demo">A Paragraph.</p>

 <button type="button" onclick="myFunction()">Try it</button>
 <button type="buttonOne" onclick="mySecondFunction()">Try Again</button>

</body>
</html> 


函数myFunction（）{
document.getElementById（“demo”）.innerHTML=“已编辑”；
}
函数mySecondFunction（）{
document.getElementById（“demo”）.innerHTML=“”；
}
头中的JavaScript
段落
试试看
再试一次
代码中没有id=“button”的按钮。是的。这是另一个错误：）我不知道如何以比我现在更具体的方式问这个问题。在这种情况下，用户只需简单地单击按钮1，然后单击按钮2。我如何标记段落元素的内容？因为我们从一个尚未存在的输入字段开始？要更改现有的输入吗？您可以添加一个示例吗您期望的输出是什么？您的答案在@Shantanu的帖子中。请使用.html（）
函数而不是.append（）功能。如果我正确理解OP的请求，则此答案与他们的要求不符。他希望在单击两个按钮时具有相同的功能。他的问题总体上不清楚，但他确实明确表示他希望通过单击按钮两来修改现有输入。您的答案只是添加了另一个输入。是的，这更像是一个“问题”在输入存在后，如何更改尚未存在的输入"@Alexandracecilliamartinez编辑您的问题并清除您想要的内容！是的。这将使按钮2附加一个新的输入字段。我要找的不是附加一个新的输入字段，而是更改当前输入（如果存在）。如果没有现有输入，只有这样，才能在我的段落中附加一个新的输入？这有帮助吗？您的答案wer最接近事实。我想我会自己解决这个问题。非常感谢你的帮助。非常感谢。非常感谢！
function appendInput() {
    var myInput = "<input id='idInput' name='inputMe'></input>";
    $('#myParagraph').append(myInput);
}

function changeInput() {
    var myInputValue = $('#idInput').val(); // get value of input field
    myInputValue = myInputValue + " <- changed"; // do your value changing here
    $('#idInput').val(myInputValue); // set value back to input field
}

$('#buttonOne').one("click", function(event) {
    if(!$('#idInput').length) { //this evaluates to false if the element exists
        appendInput();
    }
});


$('#buttonTwo').on("click", function(event) {
    if(!$('#idInput').length) { //this evaluates to false if the element exists
        appendInput();
    } else {
        changeInput();
    }
});

<html>
<head>
<script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "edited";
  }
  function mySecondFunction() {
    document.getElementById("demo").innerHTML ="<input></input>";
  }
</script>
</head>

<body>

<h1>JavaScript in Head</h1>

<p id="demo">A Paragraph.</p>

 <button type="button" onclick="myFunction()">Try it</button>
 <button type="buttonOne" onclick="mySecondFunction()">Try Again</button>

</body>
</html>