用于 html innerHTML + = 的 Jquery 类比答案

【问题标题】：Jquery analogue for html innerHTML + =用于 html innerHTML + = 的 Jquery 类比
【发布时间】：2018-08-20 07:13:25
【问题描述】：

我需要将值从按钮放到文本位置。我这样做。
text($(button).val());
但是当我需要+这个值时，它只是替换了我需要的文本。就像值是5，然后又是+ 5，所以它将是55。

【问题讨论】：

看.append()
你的意思是 5+5 = 55？还是 5+5 = 10？您是要附加值还是进行一些数学计算？
如果您不希望它可能呈现为 html，您可以将创建的文本节点与 append() 结合使用来执行文本追加。 stackoverflow.com/questions/44577548/…

标签： javascript jquery dom

【解决方案1】：

代替：

.text($(button).val());

你可以使用：

.text( function ): where 函数返回要设置的文本内容。接收集合中元素的索引位置和旧文本值作为参数。

一个例子：

$('#btn').on('click', function(e) {
    var val = $(this).val();
    $('#txt').text(function(idx, txt) {
        return txt + val;
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p id="txt"></p>
<button id="btn" value="5">Click Me</button>

【讨论】：

【解决方案2】：

如果您希望获取按钮的内容然后添加到其中，则需要执行以下操作。假设按钮如下：

<button id="someButton">5</button>

你想给它加 5，所以按钮会显示 10。

var buttonText = parseInt($("#someButton").text()) + 5; //results in 10
$("#someButton").text(buttonText);

如您所见，我使用parseInt 来确保看到的数字是一个整数，以便您可以对其进行加法运算。

【讨论】：

对不起，错了。谢谢

【解决方案3】：

function addText () {
  document.getElementById('paragraph').innerHTML += $('#buttonID').val();
}

试试这个。这个+= 到innerHTML 而不是重新分配。这是一个 JavaScript/jQuery 混合体，我希望没问题，但也有这种纯 jQuery 方法，它使用@Patrick Evans 提到的 .append() 方法。

$(document).ready(function () {
  $('#paragraph').append($('#buttonID').val());
});

希望这会有所帮助。

【讨论】：

OP 正在寻找 jQuery 的方法。
其实，OP从来没有指定他想要jQuery还是JavaScript
我不认为这个评论线程丰富了讨论。我意识到我是不正确的，希望你在这个时候感到满意。我已经编辑了我的答案以包含纯 jQuery。

【解决方案4】：

如果您只想附加值：

<button class="display-value">5</button>

<button id="plus">+</button>

现在您可以在 jQuery 中执行此操作：

$('#plus').on('click' , () => {
    let val = $('.display-value').text();
    $('.display-value').text((val + val));
    return false;
});

如果您要执行数学运算，则必须使用parseInt。

$('#plus').on('click' , () => {
     let val = parseInt($('.display-value').text());
     $('.display-value').text((val + val));
     return false;
});

【讨论】：